<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">@media print {  .gmnoprint {    display:none  }}@media screen {  .gmnoscreen {    display:none  }}</style><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Online tool to create code for polyline and polygon to Google Maps v3 (version 3)">
<title>Tool for Google Maps v3 (version 3)</title>

<script type="text/javascript" src="v3tool-Dateien/js.js"></script><script src="v3tool-Dateien/main.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

// This application is provided by Kjell Scharning
//  Licensed under the Apache License, Version 2.0;
//  http://www.apache.org/licenses/LICENSE-2.0

function gob(e){if(typeof(e)=='object')return(e);if(document.getElementById)return(document.getElementById(e));return(eval(e))}
var map;
var polyShape;
var markerShape;
//var oldDirMarkers = [];
//var tmpPolyLine;
var drawnShapes = [];
var holeShapes = [];
var startMarker;
var nemarker;
var tinyMarker;
var markers = [];
var midmarkers = [];
//var markerlistener1;
//var markerlistener2;
var rectangle;
var circle;
var southWest;
var northEast;
var centerPoint;
var radiusPoint;
var calc;
var startpoint;
var dirpointstart = null;
var dirpointend = 0;
var dirline;
var waypts = [];
//var waypots = [];
var polyPoints = [];
var pointsArray = [];
var markersArray = [];
var addresssArray = [];
var pointsArrayKml = [];
var markersArrayKml = [];
var toolID = 1;
var codeID = 1;
var shapeId = 0;
var adder = 0;
var plmcur = 0;
var lcur = 0;
var pcur = 0;
//var rcur = 0;
var ccur = 0;
var mcur = 0;
var outerPoints = [];
var holePolyArray = [];
var outerShape;
var anotherhole = false;
//var it;
var outerArray = [];
var innerArray = [];
var innerArrays = [];
var outerArrayKml = [];
var innerArrayKml = [];
var innerArraysKml = [];
var placemarks = [];
//var mylistener;
var editing = false;
var notext = false;
var kmlcode = "";
var javacode = "";
var polylineDecColorCur = "255,0,0";
var polygonDecColorCur = "255,0,0";
var docuname = "My document";
var docudesc = "Content";
var polylinestyles = [];
var polygonstyles = [];
//var rectanglestyles = [];
var circlestyles = [];
var markerstyles = [];
var geocoder; // = new google.maps.Geocoder();
//var startLocation;
var endLocation;
//var dircount;
var dircountstart;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var directionsYes = 0;
var destinations = [];
//var currentDirections = null;
var oldpoint = null;
var prevpoint;
var prevnumber;
//var infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50)});
var tmpPolyLine = new google.maps.Polyline({
    strokeColor: "#00FF00",
    strokeOpacity: 0.8,
    strokeWeight: 2
});
var tinyIcon = new google.maps.MarkerImage(
    'icons/marker_20_red.png',
    new google.maps.Size(12,20),
    new google.maps.Point(0,0),
    new google.maps.Point(6,16)
);
/*var tinyShadow = new google.maps.MarkerImage(
    'icons/marker_20_shadow.png',
    new google.maps.Size(22,20),
    new google.maps.Point(6,20),
    new google.maps.Point(5,1)
);*/
var imageNormal = new google.maps.MarkerImage(
	"images/square.png",
	new google.maps.Size(11, 11),
	new google.maps.Point(0, 0),
	new google.maps.Point(6, 6)
);
var imageHover = new google.maps.MarkerImage(
	"images/square_over.png",
	new google.maps.Size(11, 11),
	new google.maps.Point(0, 0),
	new google.maps.Point(6, 6)
);
var imageNormalMidpoint = new google.maps.MarkerImage(
	"images/square_transparent.png",
	new google.maps.Size(11, 11),
	new google.maps.Point(0, 0),
	new google.maps.Point(6, 6)
);
/*var imageHoverMidpoint = new google.maps.MarkerImage(
	"square_transparent_over.png",
	new google.maps.Size(11, 11),
	new google.maps.Point(0, 0),
	new google.maps.Point(6, 6)
);*/
function polystyle() {
    this.name = "Lump";
    this.kmlcolor = "CD0000FF";
    this.kmlfill = "9AFF0000";
    this.color = "#FF0000";
    this.fill = "#0000FF";
    this.width = 2;
    this.lineopac = 0.8;
    this.fillopac = 0.6;
}
function linestyle() {
    this.name = "Path";
    this.kmlcolor = "FF0000FF";
    this.color = "#FF0000";
    this.width = 3;
    this.lineopac = 1;
}
function circstyle() {
    this.name = "Circ";
    this.color = "#FF0000";
    this.fill = "#0000FF";
    this.width = 2;
    this.lineopac = 0.8;
    this.fillopac = 0.6;
}
function markerstyleobject() {
    this.name = "markerstyle";
    this.icon = "http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
}
function placemarkobject() {
    this.name = "NAME";
    this.desc = "YES";
    this.style = "Path";
    this.stylecur = 0;
    this.tess = 1;
    this.alt = "clampToGround";
    this.plmtext = "";
    this.jstext = "";
    this.jscode = [];
    this.kmlcode = [];
    this.kmlholecode = [];
    this.poly = "pl";
    this.shape = null;
    this.point = null;
    this.toolID = 1;
    this.hole = 0;
    this.ID = 0;
}
function createplacemarkobject() {
    var thisplacemark = new placemarkobject();
    placemarks.push(thisplacemark);
}
function createpolygonstyleobject() {
    var polygonstyle = new polystyle();
    polygonstyles.push(polygonstyle);
}
function createlinestyleobject() {
    var polylinestyle = new linestyle();
    polylinestyles.push(polylinestyle);
}
function createcirclestyleobject() {
    var cirstyle = new circstyle();
    circlestyles.push(cirstyle);
}
function createmarkerstyleobject() {
    var thisstyle = new markerstyleobject();
    markerstyles.push(thisstyle);
}
function preparePolyline(){
    var polyOptions = {
        path: polyPoints,
        strokeColor: polylinestyles[lcur].color,
        strokeOpacity: polylinestyles[lcur].lineopac,
        strokeWeight: polylinestyles[lcur].width};
    polyShape = new google.maps.Polyline(polyOptions);
    polyShape.setMap(map);
    /*var tmpPolyOptions = {
    	strokeColor: polylinestyles[lcur].color,
    	strokeOpacity: polylinestyles[lcur].lineopac,
    	strokeWeight: polylinestyles[lcur].width
    };
    tmpPolyLine = new google.maps.Polyline(tmpPolyOptions);
    tmpPolyLine.setMap(map);*/
}

function preparePolygon(){
    var polyOptions = {
        path: polyPoints,
        strokeColor: polygonstyles[pcur].color,
        strokeOpacity: polygonstyles[pcur].lineopac,
        strokeWeight: polygonstyles[pcur].width,
        fillColor: polygonstyles[pcur].fill,
        fillOpacity: polygonstyles[pcur].fillopac};
    polyShape = new google.maps.Polygon(polyOptions);
    polyShape.setMap(map);
}
function activateRectangle() {
    rectangle = new google.maps.Rectangle({
        map: map,
        strokeColor: polygonstyles[pcur].color,
        strokeOpacity: polygonstyles[pcur].lineopac,
        strokeWeight: polygonstyles[pcur].width,
        fillColor: polygonstyles[pcur].fill,
        fillOpacity: polygonstyles[pcur].fillopac
    });
}
function activateCircle() {
    circle = new google.maps.Circle({
        map: map,
        fillColor: circlestyles[ccur].fill,
        fillOpacity: circlestyles[ccur].fillopac,
        strokeColor: circlestyles[ccur].color,
        strokeOpacity: circlestyles[ccur].lineopac,
        strokeWeight: circlestyles[ccur].width
    });
}
function activateMarker() {
    markerShape = new google.maps.Marker({
        map: map,
        icon: markerstyles[mcur].icon
    });
}
function initmap(){
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(59.914063, 10.737874);//(45.0,7.0);//45.074723, 7.656433
    var myOptions = {
        zoom: 7,
        center: latlng,
        draggableCursor: 'default',
        draggingCursor: 'pointer',
        scaleControl: true,
        mapTypeControl: true,
        mapTypeControlOptions:{style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{featureType: 'poi', stylers: [{visibility: 'off'}]}],
        streetViewControl: false};
    map = new google.maps.Map(gob('map_canvas'),myOptions);
    //var myStyle = [{featureType: 'poi', stylers: [{visibility: 'off'}]}];
    //map.setOptions({styles: myStyle}); // styles and stylers are arrays
    polyPoints = new google.maps.MVCArray(); // collects coordinates
    tmpPolyLine.setMap(map);
    createplacemarkobject();
    createlinestyleobject();
    createpolygonstyleobject();
    createcirclestyleobject();
    createmarkerstyleobject();
    preparePolyline(); // create a Polyline object

    google.maps.event.addListener(map, 'click', addLatLng);
    google.maps.event.addListener(map,'zoom_changed',mapzoom);
    cursorposition(map);
}
// Called by initmap, addLatLng, drawRectangle, drawCircle, drawpolywithhole
function cursorposition(mapregion){
    google.maps.event.addListener(mapregion,'mousemove',function(point){
        var LnglatStr6 = point.latLng.lng().toFixed(6) + ', ' + point.latLng.lat().toFixed(6);
        var latLngStr6 = point.latLng.lat().toFixed(6) + ', ' + point.latLng.lng().toFixed(6);
        gob('over').options[0].text = LnglatStr6;
        gob('over').options[1].text = latLngStr6;
    });
}

function addLatLng(point){
    if(directionsYes == 1) {
        drawDirections(point.latLng);
        return;
    }
    if(plmcur != placemarks.length-1) {
        nextshape();
    }

    // Rectangle and circle can't collect points with getPath. solved by letting Polyline collect the points and then erase Polyline
    polyPoints = polyShape.getPath();
    // This codeline does the drawing on the map
    polyPoints.insertAt(polyPoints.length, point.latLng); // or: polyPoints.push(point.latLng)
    if(polyPoints.length == 1) {
        startpoint = point.latLng;
        placemarks[plmcur].point = startpoint; // stored because it's to be used when the shape is clicked on as a stored shape
        setstartMarker(startpoint);
        if(toolID == 5) {
            drawMarkers(startpoint);
        }
    }
    if(polyPoints.length == 2 && toolID == 3) createrectangle(point);
    if(polyPoints.length == 2 && toolID == 4) createcircle(point);
    if(toolID == 1 || toolID == 2) { // if polyline or polygon
        var stringtobesaved = point.latLng.lat().toFixed(6) + ',' + point.latLng.lng().toFixed(6);
        var kmlstringtobesaved = point.latLng.lng().toFixed(6) + ',' + point.latLng.lat().toFixed(6);
        //Cursor position, when inside polyShape, is registered with this listener
        cursorposition(polyShape);
        if(adder == 0) { //shape with no hole
            pointsArray.push(stringtobesaved); // collect textstring for presentation in textarea
            pointsArrayKml.push(kmlstringtobesaved); // collect textstring for presentation in textarea
            if(polyPoints.length == 1 && toolID == 2) closethis('polygonstuff');
            if(codeID == 1 && toolID == 1) logCode1(); // write kml for polyline
            if(codeID == 1 && toolID == 2) logCode2(); // write kml for polygon
            if(codeID == 2) logCode4(); // write Google javascript
        }
        if(adder == 1) { // adder is increased in function holecreator
            outerArray.push(stringtobesaved);
            outerArrayKml.push(kmlstringtobesaved);
        }
        if(adder == 2) {
            innerArray.push(stringtobesaved);
            innerArrayKml.push(kmlstringtobesaved);
        }
    }
}
function setstartMarker(point){
    startMarker = new google.maps.Marker({
        position: point,
        map: map});
    startMarker.setTitle("#" + polyPoints.length);
}
function createrectangle(point) {
    // startMarker is southwest point. now set northeast
    nemarker = new google.maps.Marker({
        position: point.latLng,
        draggable: true,
        raiseOnDrag: false,
        title: "Draggable",
        map: map});
    google.maps.event.addListener(startMarker, 'drag', drawRectangle);
    google.maps.event.addListener(nemarker, 'drag', drawRectangle);
    startMarker.setDraggable(true);
    startMarker.setAnimation(null);
    startMarker.setTitle("Draggable");
    polyShape.setMap(null); // remove the Polyline that has collected the points
    polyPoints = [];
    drawRectangle();
}
function drawRectangle() {
    southWest = startMarker.getPosition(); // used in logCode6()
    northEast = nemarker.getPosition(); // used in logCode6()
    var latLngBounds = new google.maps.LatLngBounds(
        southWest,
        northEast
    );
    rectangle.setBounds(latLngBounds);
    //Cursor position, when inside rectangle, is registered with this listener
    cursorposition(rectangle);
    // the Rectangle was created in activateRectangle(), called from newstart(), which may have been called from setTool()
    var northWest = new google.maps.LatLng(southWest.lat(), northEast.lng());
    var southEast = new google.maps.LatLng(northEast.lat(), southWest.lng());
    polyPoints = [];
    pointsArray = [];
    pointsArrayKml = [];
    polyPoints.push(southWest);
    polyPoints.push(northWest);
    polyPoints.push(northEast);
    polyPoints.push(southEast);
    var stringtobesaved = southWest.lng().toFixed(6)+','+southWest.lat().toFixed(6);
    pointsArrayKml.push(stringtobesaved);
    stringtobesaved = southWest.lng().toFixed(6)+','+northEast.lat().toFixed(6);
    pointsArrayKml.push(stringtobesaved);
    stringtobesaved = northEast.lng().toFixed(6)+','+northEast.lat().toFixed(6);
    pointsArrayKml.push(stringtobesaved);
    stringtobesaved = northEast.lng().toFixed(6)+','+southWest.lat().toFixed(6);
    pointsArrayKml.push(stringtobesaved);
    stringtobesaved = southWest.lat().toFixed(6)+','+southWest.lng().toFixed(6);
    pointsArray.push(stringtobesaved);
    stringtobesaved = northEast.lat().toFixed(6)+','+southWest.lng().toFixed(6);
    pointsArray.push(stringtobesaved);
    stringtobesaved = northEast.lat().toFixed(6)+','+northEast.lng().toFixed(6);
    pointsArray.push(stringtobesaved);
    stringtobesaved = southWest.lat().toFixed(6)+','+northEast.lng().toFixed(6);
    pointsArray.push(stringtobesaved);
    // Change the rectangle to polygon
    rectangle.setMap(null);
    southWest = northEast = null;
    preparePolygon();
    if(codeID == 2) logCode6();
    if(codeID == 1) logCode2();
}
function createcircle(point) {
    // startMarker is center point. now set radius
    nemarker = new google.maps.Marker({
        position: point.latLng,
        draggable: true,
        raiseOnDrag: false,
        title: "Draggable",
        map: map});
    google.maps.event.addListener(startMarker, 'drag', drawCircle);
    google.maps.event.addListener(nemarker, 'drag', drawCircle);
    startMarker.setDraggable(true);
    startMarker.setAnimation(null);
    startMarker.setTitle("Draggable");
    drawCircle();
    polyShape.setMap(null); // remove the Polyline that has collected the points
    polyPoints = [];
}
function drawCircle() {
    centerPoint = startMarker.getPosition();
    radiusPoint = nemarker.getPosition();
    circle.bindTo('center', startMarker, 'position');
    calc = distance(centerPoint.lat(),centerPoint.lng(),radiusPoint.lat(),radiusPoint.lng());
    circle.setRadius(calc);
    //Cursor position, when inside circle, is registered with this listener
    cursorposition(circle);
    codeID = gob('codechoice').value = 2;
    logCode7();
}
// calculate distance between two coordinates
function distance(lat1,lon1,lat2,lon2) {
    var R = 6371000; // earth's radius in meters
    var dLat = (lat2-lat1) * Math.PI / 180;
    var dLon = (lon2-lon1) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
    Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
    return d;
}

function drawMarkers(point) {
    if(startMarker) startMarker.setMap(null);
    if(polyShape) polyShape.setMap(null);
    var id = plmcur;
    placemarks[plmcur].jscode = point.lat().toFixed(6) + ',' + point.lng().toFixed(6);
    placemarks[plmcur].kmlcode = point.lng().toFixed(6) + ',' + point.lat().toFixed(6);
    activateMarker();
    markerShape.setPosition(point);
    var marker = markerShape;
    tinyMarker = new google.maps.Marker({
        position: placemarks[plmcur].point,
        map: map,
        icon: tinyIcon
    });
    google.maps.event.addListener(marker, 'click', function(event){
        plmcur = id;
        markerShape = marker;
        var html = "<b>" + placemarks[plmcur].name + "</b> <br/>" + placemarks[plmcur].desc;
        var infowindow = new google.maps.InfoWindow({
            content: html
        });
        if(tinyMarker) tinyMarker.setMap(null);
        tinyMarker = new google.maps.Marker({
            position: placemarks[plmcur].point,
            map: map,
            icon: tinyIcon
        });
        if(toolID != 5) toolID = gob('toolchoice').value = 5;
        if(codeID == 1)logCode9();
        if(codeID == 2)logCode8();
        infowindow.open(map,marker);
    });
    drawnShapes.push(markerShape);
    if(codeID == 2) logCode8();
    if(codeID == 1) logCode9();
}
function drawDirections(point) {
    if(dirpointstart == null) {
        //setDirectionsMarker(point);
        dirpointstart = point;
        setstartMarker(dirpointstart);
        increaseplmcur();
        dirline = plmcur;
        placemarks[dirline].shape = polyShape;
        placemarks[dirline].point = dirpointstart;
        directionsDisplay = new google.maps.DirectionsRenderer({
            suppressMarkers: true,
            preserveViewport: true
        });
    }else{
        if(startMarker) startMarker.setMap(null);
        directionsDisplay.setOptions({polylineOptions: {
            strokeColor: polylinestyles[lcur].color,
            strokeOpacity: polylinestyles[lcur].lineopac,
            strokeWeight: polylinestyles[lcur].width}});
        if(dirpointend == 0) {
            var request = {
                origin: dirpointstart,
                destination: point,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            oldpoint = point;
            destinations.push(request.destination);
            calcRoute(request);

            dirpointend = 1;
            dircountstart = plmcur+1;
        }else{
            if(oldpoint) waypts.push({location:oldpoint, stopover:true});
            request = {
                origin: dirpointstart,
                destination: point,
                waypoints: waypts,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            oldpoint = point;
            destinations.push(request.destination);
            calcRoute(request);
        }
    }
}
function calcRoute(request) {
    if(waypts.length == 0) directionsDisplay.setMap(map);
    directionsService.route(request, RenderCustomDirections);
}
function RenderCustomDirections(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        polyPoints = [];
        pointsArray = [];
        pointsArrayKml = [];
        markersArray = [];
        markersArrayKml = [];
        addresssArray = [];
        var result = directionsDisplay.getDirections().routes[0];
        for(var i = 0; i < result.overview_path.length; i++) {
            polyPoints.push(result.overview_path[i]);
            pointsArray.push(result.overview_path[i].lat().toFixed(6) + ',' + result.overview_path[i].lng().toFixed(6));
            pointsArrayKml.push(result.overview_path[i].lng().toFixed(6) + ',' + result.overview_path[i].lat().toFixed(6));
        }
        polyShape.setPath(polyPoints);
        endLocation = new Object();
        var legs = response.routes[0].legs;
        for (var i=0;i<legs.length;i++) {
            if (i == 0) {
                createdirMarker(legs[i].start_location,"start",legs[i].start_address,"green");
            } else {
                createdirMarker(legs[i].start_location,"waypoint"+i,legs[i].start_address,"yellow");
            }
            endLocation.latlng = legs[i].end_location;
            endLocation.address = legs[i].end_address;
            markersArray.push(legs[i].start_location.lat().toFixed(6) + ',' + legs[i].start_location.lng().toFixed(6));
            markersArrayKml.push(legs[i].start_location.lng().toFixed(6) + ',' + legs[i].start_location.lat().toFixed(6));
            addresssArray.push(legs[i].start_address);

        }
        createdirMarker(endLocation.latlng,"end",endLocation.address,"red");
        markersArray.push(endLocation.latlng.lat().toFixed(6) + ',' + endLocation.latlng.lng().toFixed(6));
        markersArrayKml.push(endLocation.latlng.lng().toFixed(6) + ',' + endLocation.latlng.lat().toFixed(6));
        addresssArray.push(endLocation.address);
        logCode1a();
    }
    else alert(status);
}
function createdirMarker(latlng, label, html, color) {
    if(tinyMarker) tinyMarker.setMap(null);
    createplacemarkobject();
    plmcur++;
    if(color == "green") {
        if(plmcur != dircountstart) {
            for(var i=dircountstart;i<plmcur;i++) {
                placemarks.pop();
                drawnShapes[drawnShapes.length-1].setMap(null);
                drawnShapes.pop();
            }
            plmcur = dircountstart;
        }
    }
    activateMarker();
    markerShape.setPosition(latlng);
    placemarks[plmcur].jscode = latlng.lat().toFixed(6) + ',' + latlng.lng().toFixed(6);
    placemarks[plmcur].kmlcode = latlng.lng().toFixed(6) + ',' + latlng.lat().toFixed(6);
    placemarks[plmcur].desc = html;
    placemarks[plmcur].point = latlng;
    placemarks[plmcur].style = markerstyles[mcur].name;
    placemarks[plmcur].stylecur = mcur;
    var marker = markerShape;
    var thisshape = plmcur;
    google.maps.event.addListener(marker, 'click', function(event){
        markerShape = marker;
        plmcur = thisshape;
        var html = "<b>" + placemarks[thisshape].name + "</b> <br/>" + placemarks[thisshape].desc;
        var infowindow = new google.maps.InfoWindow({
            content: html
        });
        if(tinyMarker) tinyMarker.setMap(null);
        tinyMarker = new google.maps.Marker({
            position: placemarks[plmcur].point,
            map: map,
            icon: tinyIcon
        });
        if(toolID != 5 && directionsYes == 0) toolID = gob('toolchoice').value = 5;
        if(codeID == 1) logCode9();
        if(codeID == 2) logCode8();
        infowindow.open(map,marker);
    });
    drawnShapes.push(markerShape);
}
// Called from button
function undo() {
    drawnShapes[drawnShapes.length-1].setMap(null);
    destinations.pop();
    var point = destinations[destinations.length-1];
    oldpoint = point;
    waypts.pop();
    var request = {
        origin: dirpointstart,
        destination: point,
        waypoints: waypts,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    calcRoute(request);
}

// Not used
function setDirectionsMarker(point) {
    var image = new google.maps.MarkerImage('http://www.birdtheme.org/useful/images/square.png');
    var marker = new google.maps.Marker({
        position: point,
        map: map,
        icon: image
    });
    /*var shadow = new google.maps.MarkerImage('http://maps.google.com/intl/en_us/mapfiles/ms/micons/msmarker.shadow.png',
        new google.maps.Size(37,32),
        new google.maps.Point(16,0),
        new google.maps.Point(0,32));
    var title = "#" + markers.length;
    var id = plmcur;
    placemarks[plmcur].point = point;
    placemarks[plmcur].coord = point.lng().toFixed(6) + ', ' + point.lat().toFixed(6);*/
    /*var marker = new google.maps.Marker({
        position: point,
        map: map,
        draggable: true,
        icon: image,
        shadow: shadow});*/
    //marker.setTitle(title);
    //markers.push(marker);
}

function setTool(){
    if(polyPoints.length == 0 && kmlcode == "" && javacode == "") {
        newstart();
    }else{
        if(toolID == 1){ // polyline
            // change to polyline draw mode not allowed
            if(outerArray.length > 0) { //indicates polygon with hole
                toolID = 2;
                nextshape();
                toolID = 1;
                newstart();
                return;
            }
            if(rectangle) {
                toolID = 3;
                nextshape();
                toolID = 1;
                newstart();
                return;
            }
            if(circle) {
                toolID = 4;
                nextshape();
                toolID = 1;
                newstart();
                return;
            }
            if(markerShape) {
                toolID = 5;
                nextshape();
                toolID = 1;
                newstart();
                return;
            }
            if(directionsYes == 1) {
                toolID = 6;
                nextshape();
                directionsYes = 0;
                toolID = 1;
                newstart();
                return;
            }
            placemarks[plmcur].style = polylinestyles[polylinestyles.length-1].name;
            placemarks[plmcur].stylecur = polylinestyles.length-1;
            if(polyShape) polyShape.setMap(null);
            preparePolyline(); //if a polygon exists, it will be redrawn as polylines
            if(codeID == 1) logCode1(); // KML
            if(codeID == 2) logCode4(); // Javascipt
        }
        if(toolID == 2){ // polygon
            if(rectangle) {
                toolID = 3;
                nextshape();
                toolID = 2;
                newstart();
                return;
            }
            if(circle) {
                toolID = 4;
                nextshape();
                toolID = 2;
                newstart();
                return;
            }
            if(markerShape) {
                toolID = 5;
                nextshape();
                toolID = 2;
                newstart();
                return;
            }
            if(directionsYes == 1) {
                toolID = 6;
                nextshape();
                directionsYes = 0;
                toolID = 2;
                newstart();
                return;
            }
            placemarks[plmcur].style = polygonstyles[polygonstyles.length-1].name;
            placemarks[plmcur].stylecur = polygonstyles.length-1;
            if(polyShape) polyShape.setMap(null);
            preparePolygon(); //if a polyline exists, it will be redrawn as a polygon
            if(codeID == 1) logCode2(); // KML
            if(codeID == 2) logCode4(); // Javascript
        }
        if(toolID == 3 || toolID == 4 || toolID == 5 || toolID == 6){
            if(polyShape) polyShape.setMap(null);
            if(directionsDisplay) directionsDisplay.setMap(null);
            if(circle) circle.setMap(null);
            if(rectangle) rectangle.setMap(null);
            directionsYes = 0;
            newstart();
        }
    }
}
function setCode(){
    if(toolID == 4) { // circle
        codeID = gob('codechoice').value = 2; // javascript
        return;
    }
    if(toolID == 6) { // directions
        codeID = gob('codechoice').value = 1; // KML
        return;
    }
    if(polyPoints.length !== 0 || kmlcode !== "" || javacode !== ""){
        if(codeID == 1 && toolID == 1) logCode1();
        if(codeID == 1 && toolID == 2 && outerArray.length == 0) logCode2();
        if(codeID == 1 && toolID == 2 && outerArray.length > 0) logCode3();
        if(codeID == 2 && toolID == 1) logCode4(); // write Google javascript
        if(codeID == 2 && toolID == 2 && outerArray.length == 0) logCode4();
        if(codeID == 2 && toolID == 2 && outerArray.length > 0) logCode5();
        if(toolID == 3) { // rectangle
            if(codeID == 1) logCode2();
            if(codeID == 2) logCode6();
        }
        if(toolID == 5) { // marker
            if(codeID == 1) logCode9();
            if(codeID == 2) logCode8();
        }
    }
}
function increaseplmcur() {
    if(placemarks[plmcur].plmtext != "") {
        if(polyShape && directionsYes == 0) {
            placemarks[plmcur].shape = polyShape;
            if(toolID==1 || toolID==2 || toolID==3) addpolyShapelistener();
            createplacemarkobject();
            plmcur = placemarks.length -1;
        }
        if(markerShape) {
            placemarks[plmcur].shape = markerShape;
            createplacemarkobject();
            plmcur = placemarks.length -1;
        }
    }
}
function nextshape() {
    if(editing == true) stopediting();
    /*if(southWest) {
        rectangle.setMap(null);
        southWest = northEast = null;
        preparePolygon();
    }*/
    placemarks[plmcur].shape = polyShape;
    if(plmcur < placemarks.length -1) addpolyShapelistener();
    plmcur = placemarks.length -1;
    increaseplmcur();
    if(directionsYes == 1) {
        plmcur = dirline;
        addpolyShapelistener();
        plmcur = placemarks.length -1;
        toolID = 6;
    }
    if(polyShape) drawnShapes.push(polyShape); // used in clearMap, to have it removed from the map, drawnShapes[i].setMap(null)
    if(outerShape) drawnShapes.push(outerShape);
    if(circle) drawnShapes.push(circle);
    if(directionsDisplay) directionsDisplay.setMap(null);
    if(tinyMarker) drawnShapes.push(tinyMarker);
    polyShape = null;
    outerShape = null;
    rectangle = null;
    circle = null;
    markerShape = null;
    directionsDisplay = null;
    newstart();
}
function addpolyShapelistener() {
    //if(outerPoints.length>>0) return;
    var thisshape = plmcur;
    // In v2 I can give a shape an ID and have that ID revealed, with the map listener, when the shape is clicked on
    // I can't do that in v3. Instead I put a listener on the shape
    google.maps.event.addListener(polyShape,'click',function(point){
        if(tinyMarker) tinyMarker.setMap(null);
        if(startMarker) startMarker.setMap(null);
        directionsYes = 0;
        polyShape = placemarks[thisshape].shape;
        plmcur = thisshape;
        polyPoints = polyShape.getPath();
        if(placemarks[plmcur].poly == "pl") {
            pointsArray = placemarks[plmcur].jscode;
            pointsArrayKml = placemarks[plmcur].kmlcode;
            toolID = gob('toolchoice').value = 1;
            lcur = placemarks[plmcur].stylecur;
            if(codeID == 1) logCode1();
            if(codeID == 2) logCode4(); // write Google javascript
        }
        if(placemarks[plmcur].poly == "pg") {
            pointsArray = placemarks[plmcur].jscode;
            pointsArrayKml = placemarks[plmcur].kmlcode;
            toolID = gob('toolchoice').value = 2;
            pcur = placemarks[plmcur].stylecur;
            if(codeID == 1) logCode2();
            if(codeID == 2) logCode4(); // write Google javascript
        }
        if(placemarks[plmcur].poly == "pgh") {
            outerArrayKml = placemarks[plmcur].kmlcode;
            innerArraysKml = placemarks[plmcur].kmlholecode;
            /*var polly = polyShape.getPaths();
            polyPoints = polly.getAt(0);
            var points = polly.getAt(0);
            //alert(point.lng().toFixed(6));
            for(var i = 0; i<points.length-1; i++) {
                outerArray.push(points.getAt(i).lat().toFixed(6) + ',' + points.getAt(i).lng().toFixed(6));
                outerArrayKml.push(points.getAt(i).lng().toFixed(6) + ',' + points.getAt(i).lat().toFixed(6));
            }
            for(i = 1; i<polly.length; i++) {
                points = polly.getAt(i);
                if(i == polly.length-1) {
                    for(var j = 0; j<points.length; j++) {
                        innerArray.push(points.getAt(j).lat().toFixed(6) + ',' + points.getAt(j).lng().toFixed(6));
                        innerArrayKml.push(points.getAt(j).lng().toFixed(6) + ',' + points.getAt(j).lat().toFixed(6));
                    }
                }else{
                    for(var j = 0; j<points.length-1; j++) {
                        innerArray.push(points.getAt(j).lat().toFixed(6) + ',' + points.getAt(j).lng().toFixed(6));
                        innerArrayKml.push(points.getAt(j).lng().toFixed(6) + ',' + points.getAt(j).lat().toFixed(6));
                    }
                }
                innerArrays.push(innerArray);
                innerArraysKml.push(innerArrayKml);
                innerArray = [];
                innerArrayKml = [];
            }*/
            toolID = gob('toolchoice').value = 2;
            pcur = placemarks[plmcur].stylecur;
            if(codeID == 1) logCode3();
            if(codeID == 2) logCode5(); // write Google javascript
        }
        //polyPoints = polyShape.getPath();
        //polyShape.setEditable(true);
        tinyMarker = new google.maps.Marker({
            position: placemarks[plmcur].point,
            map: map,
            icon: tinyIcon
        });
        closethis('polygonstuff');
    });
}
// Clear current Map
function clearMap(){
    if(editing == true) stopediting();
    if(polyShape) polyShape.setMap(null); // polyline or polygon
    if(outerShape) outerShape.setMap(null);
    if(rectangle) rectangle.setMap(null);
    if(circle) circle.setMap(null);
    if(drawnShapes.length > 0) {
        for(var i = 0; i < drawnShapes.length; i++) {
            drawnShapes[i].setMap(null);
        }
    }
    plmcur = 0;
    newstart();
    placemarks = [];
    createplacemarkobject();
}
function newstart() {
    polyPoints = [];
    outerPoints = [];
    pointsArray = [];
    markersArray = [];
    pointsArrayKml = [];
    markersArrayKml = [];
    addresssArray = [];
    outerArray = [];
    innerArray = [];
    outerArrayKml = [];
    innerArrayKml = [];
    holePolyArray = [];
    innerArrays = [];
    innerArraysKml = [];
    waypts = [];
    destinations = [];
    adder = 0;
    directionsYes = 0;
    dirpointend = 0;
    dirpointstart = null;
    oldpoint = null;
    closethis('polylineoptions');
    closethis('polygonoptions');
    closethis('circleoptions');
    if(toolID != 2) closethis('polygonstuff');
    if(directionsDisplay) directionsDisplay.setMap(null);
    if(startMarker) startMarker.setMap(null);
    if(nemarker) nemarker.setMap(null);
    if(tinyMarker) tinyMarker.setMap(null);
    if(toolID == 1) {
        placemarks[plmcur].style = polylinestyles[polylinestyles.length-1].name;
        placemarks[plmcur].stylecur = polylinestyles.length-1;
        preparePolyline();
        polylineintroduction();
    }
    if(toolID == 2){
        showthis('polygonstuff');
        gob('stepdiv').innerHTML = "Step 0";
        placemarks[plmcur].style = polygonstyles[polygonstyles.length-1].name;
        placemarks[plmcur].stylecur = polygonstyles.length-1;
        preparePolygon();
        polygonintroduction();
    }
    if(toolID == 3) {
        placemarks[plmcur].style = polygonstyles[polygonstyles.length-1].name;
        placemarks[plmcur].stylecur = polygonstyles.length-1;
        preparePolyline(); // use Polyline to collect clicked point
        activateRectangle();
        rectangleintroduction();
    }
    if(toolID == 4) {
        placemarks[plmcur].style = circlestyles[circlestyles.length-1].name;
        placemarks[plmcur].stylecur = circlestyles.length-1;
        preparePolyline(); // use Polyline to collect clicked point
        activateCircle();
        circleintroduction();
        codeID = gob('codechoice').value = 2; // javascript, no KML for circle
    }
    if(toolID == 5) {
        placemarks[plmcur].style = markerstyles[markerstyles.length-1].name;
        placemarks[plmcur].stylecur = markerstyles.length-1;
        preparePolyline();
        markerintroduction();
    }
    if(toolID == 6){
        directionsYes = 1;
        preparePolyline();
        directionsintroduction();
        codeID = gob('codechoice').value = 1;
    }
    kmlcode = "";
    javacode = "";
}

function deleteLastPoint(){
    if(directionsYes == 1) {
        if(destinations.length == 1) return;
        undo();
        return;
    }
    if(toolID == 1) {
        if(polyShape) {
            polyPoints = polyShape.getPath();
            if(polyPoints.length > 0) {
                polyPoints.removeAt(polyPoints.length-1);
                pointsArrayKml.pop();
                if(codeID == 1) logCode1();
                if(codeID == 2) logCode4();
            }
        }
    }
    if(toolID == 2) {
        if(innerArrayKml.length>0) {
            innerArrayKml.pop();
            polyPoints.removeAt(polyPoints.length-1);
        }
        if(outerArrayKml.length>0 && innerArrayKml.length==0) {
            outerArrayKml.pop();
            //polyPoints.removeAt(polyPoints.length-1);
        }
        if(outerPoints.length===0) {
            if(polyShape) {
                polyPoints = polyShape.getPath();
                if(polyPoints.length > 0) {
                    polyPoints.removeAt(polyPoints.length-1);
                    pointsArrayKml.pop();
                    if(adder == 0) {
                        if(codeID == 1) logCode2();
                        if(codeID == 2) logCode4();
                    }
                }
            }
        }
    }
    if(polyPoints.length === 0) nextshape();
}
function counter(num){
    return adder = adder + num;
}
// Called from link 'Hole' in div 'polygonstuff'
function holecreator(){
    var step = counter(1);
    if(step == 1){
        if(gob('stepdiv').innerHTML == "Finished"){
            adder = 0;
            return;
        }else{
            if(startMarker) startMarker.setMap(null);
            if(polyShape) polyShape.setMap(null);
            polyPoints = [];
            preparePolyline();
            gob('stepdiv').innerHTML = "Step 1";
            gob('coords1').value = 'You may now draw the outer boundary. When finished, click Hole to move on to the next step.'
            +' Remember, you do not have to let start and end meet.'
            +' The API will close the shape in the finished polygon.';
        }
    }
    if(step == 2){
        // innerArray and innerArrayKml will be collected in function addLatLng
        if(anotherhole == false) {
            // outer line is finished, in Polyline draw mode
            polyPoints.insertAt(polyPoints.length, startpoint); // let start and end for outer line meet
            outerPoints = polyPoints; // store polyPoints in outerPoints. polyPoints will be reused for inner lines
            holePolyArray.push(outerPoints); // this will be the points array for polygon with hole when the points for inner lines are added
            outerShape = polyShape; // store polyShape in outerShape. polyShape will be reused for inner lines
        }
        gob('stepdiv').innerHTML = "Step 2";
        gob('coords1').value = 'You may now draw an inner boundary. Click Hole again to see the finished polygon. '+
        'You may draw more than one hole: Click Next hole and draw before you click Hole.';
        if(anotherhole == true) { // set to true in nexthole
            // a hole has been drawn, another is about to be drawn
            if(polyShape && polyPoints.length == 0) {
                polyShape.setMap(null);
                gob('coords1').value = 'Oops! Not programmed yet, but you may continue drawing holes. '+
                'Everything you have created will show up when you click Hole again.';
            }else{
                polyPoints.insertAt(polyPoints.length, startpoint);
                holePolyArray.push(polyPoints);
                if(innerArray.length>0) innerArrays.push(innerArray);
                if(innerArrayKml.length>0) innerArraysKml.push(innerArrayKml);
                holeShapes.push(polyShape);
                innerArray = [];
                innerArrayKml = [];
            }
        }
        polyPoints = [];
        preparePolyline();
        if(startMarker) startMarker.setMap(null);
    }
    if(step == 3){
        if(startMarker) startMarker.setMap(null);
        if(outerShape) outerShape.setMap(null);
        if(polyShape) polyShape.setMap(null);
        if(polyPoints.length>0) holePolyArray.push(polyPoints);
        if(innerArray.length>0) innerArrays.push(innerArray);
        if(innerArrayKml.length>0) innerArraysKml.push(innerArrayKml);
        drawpolywithhole();
        gob('stepdiv').innerHTML = "Finished";
        adder = 0;
        if(codeID == 1) logCode3();
        if(codeID == 2) logCode5();
    }
}
function drawpolywithhole() {
    if(holeShapes.length > 0) {
        for(var i = 0; i < holeShapes.length; i++) {
            holeShapes[i].setMap(null);
        }
    }
    var Points = new google.maps.MVCArray(holePolyArray);
    var polyOptions = {
        paths: Points,
        strokeColor: polygonstyles[pcur].color,
        strokeOpacity: polygonstyles[pcur].lineopac,
        strokeWeight: polygonstyles[pcur].width,
        fillColor: polygonstyles[pcur].fill,
        fillOpacity: polygonstyles[pcur].fillopac
    };
    polyShape = new google.maps.Polygon(polyOptions);
    polyShape.setMap(map);
    //Cursor position, when inside polyShape, is registered with this listener
    cursorposition(polyShape);
    anotherhole = false;
    if(startMarker) startMarker.setMap(null);
    startMarker = new google.maps.Marker({
        position: outerPoints.getAt(0),
        map: map});
    startMarker.setTitle("Polygon with hole");
    placemarks[plmcur].point = outerPoints.getAt(0);
}
// Called from button 'Next hole' in div 'polygonstuff'
function nexthole() {
    if(gob('stepdiv').innerHTML != "Finished") {
        if(outerPoints.length > 0) {
            adder = 1;
            anotherhole = true;
            drawnShapes.push(polyShape);
            holecreator();
        }
    }
}
function stopediting(){
    editing = false;
    gob('EditButton').value = 'Edit lines';
    closethis('RegretButton');
    if(outerArray.length > 0) {
        polyShape.setEditable(false);
        outerArray = [];
        outerArrayKml = [];
        innerArray = [];
        innerArrays = [];
        innerArrayKml = [];
        innerArraysKml = [];
        var polly = polyShape.getPaths();
        polyPoints = polly.getAt(0);
        var points = polly.getAt(0);
        //alert(point.lng().toFixed(6));
        for(var i = 0; i<points.length-1; i++) {
            outerArray.push(points.getAt(i).lat().toFixed(6) + ',' + points.getAt(i).lng().toFixed(6));
            outerArrayKml.push(points.getAt(i).lng().toFixed(6) + ',' + points.getAt(i).lat().toFixed(6));
        }
        for(i = 1; i<polly.length; i++) {
            points = polly.getAt(i);
            if(i == polly.length-1) {
                for(var j = 0; j<points.length; j++) {
                    innerArray.push(points.getAt(j).lat().toFixed(6) + ',' + points.getAt(j).lng().toFixed(6));
                    innerArrayKml.push(points.getAt(j).lng().toFixed(6) + ',' + points.getAt(j).lat().toFixed(6));
                }
            }else{
                for(var j = 0; j<points.length-1; j++) {
                    innerArray.push(points.getAt(j).lat().toFixed(6) + ',' + points.getAt(j).lng().toFixed(6));
                    innerArrayKml.push(points.getAt(j).lng().toFixed(6) + ',' + points.getAt(j).lat().toFixed(6));
                }
            }
            innerArrays.push(innerArray);
            innerArraysKml.push(innerArrayKml);
            innerArray = [];
            innerArrayKml = [];
        }
        toolID = gob('toolchoice').value = 2;
        //closethis('polygonstuff');
        pcur = placemarks[plmcur].stylecur;
        if(codeID == 1) logCode3();
        if(codeID == 2) logCode5(); // write Google javascript
    }else{
        for(var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
        }
        for(var i = 0; i < midmarkers.length; i++) {
            midmarkers[i].setMap(null);
        }
        polyPoints = polyShape.getPath();
        markers = [];
        midmarkers = [];
        if(plmcur != placemarks.length-1) {
            placemarks[plmcur].shape = polyShape;
            drawnShapes.push(polyShape);
            addpolyShapelistener();
        }
        //setstartMarker(polyPoints.getAt(0));
    }
}
// the "Edit lines" button has been pressed
function editlines(){
    if(editing == true){
        stopediting();
    }else{
        if(outerArray.length > 0) {
            polyShape.setEditable(true);
            closethis('polygonstuff');
        }else{
            //polyPoints = polyShape.getPath();
            if(polyPoints.length > 0){
                showthis('RegretButton');
                toolID = gob('toolchoice').value = 1; // editing is set to be possible only in polyline draw mode
                setTool();
                if(startMarker) startMarker.setMap(null);
                /*polyShape.setOptions({
                    editable: true
                });*/
                for(var i = 0; i < polyPoints.length; i++) {
                    var marker = setmarkers(polyPoints.getAt(i));
                    markers.push(marker);
                    if(i > 0) {
                        var previous = polyPoints.getAt(i-1);
                        var midmarker = setmidmarkers(polyPoints.getAt(i),previous);
                        midmarkers.push(midmarker);
                    }
                }
            }
        }
        editing = true;
        gob('EditButton').value = 'Stop edit';
    }
}
function regret(){
    for(var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
    for(var i = 0; i < midmarkers.length; i++) {
        midmarkers[i].setMap(null);
    }
    polyPoints.insertAt(prevnumber, prevpoint);
    polyShape.setPath(polyPoints);
    //editing = false;
    stopediting();
    editlines();
}
// Called from editlines and listener set in setmidmarkers
function setmarkers(point) {
    var marker = new google.maps.Marker({
    	position: point,
    	map: map,
    	icon: imageNormal,
        raiseOnDrag: false,
    	draggable: true
    });
    google.maps.event.addListener(marker, "mouseover", function() {
    	marker.setIcon(imageHover);
    });
    google.maps.event.addListener(marker, "mouseout", function() {
    	marker.setIcon(imageNormal);
    });
    google.maps.event.addListener(marker, "drag", function() {
        for (var i = 0; i < markers.length; i++) {
            if (markers[i] == marker) {
                prevpoint = marker.getPosition();
                prevnumber = i;
                polyShape.getPath().setAt(i, marker.getPosition());
                movemidmarker(i);
                break;
            }
        }
        polyPoints = polyShape.getPath();
        var stringtobesaved = marker.getPosition().lat().toFixed(6) + ',' + marker.getPosition().lng().toFixed(6);
        var kmlstringtobesaved = marker.getPosition().lng().toFixed(6) + ',' + marker.getPosition().lat().toFixed(6);
        pointsArray.splice(i,1,stringtobesaved);
        pointsArrayKml.splice(i,1,kmlstringtobesaved);
        logCode1();
    });
    google.maps.event.addListener(marker, "click", function() {
        for (var i = 0; i < markers.length; i++) {
            if (markers[i] == marker && markers.length != 1) {
                prevpoint = marker.getPosition();
                prevnumber = i;
                marker.setMap(null);
                markers.splice(i, 1);
                polyShape.getPath().removeAt(i);
                removemidmarker(i);
                break;
            }
        }
        polyPoints = polyShape.getPath();
        if(markers.length > 0) {
            pointsArray.splice(i,1);
            pointsArrayKml.splice(i,1);
            logCode1();
        }
    });
    return marker;
}
// Called from editlines and listener set in this function
function setmidmarkers(point,prevpoint) {
    //var prevpoint = markers[markers.length-2].getPosition();
    var marker = new google.maps.Marker({
    	position: new google.maps.LatLng(
    		point.lat() - (0.5 * (point.lat() - prevpoint.lat())),
    		point.lng() - (0.5 * (point.lng() - prevpoint.lng()))
    	),
    	map: map,
    	icon: imageNormalMidpoint,
        raiseOnDrag: false,
    	draggable: true
    });
    google.maps.event.addListener(marker, "mouseover", function() {
    	marker.setIcon(imageHover);
    });
    google.maps.event.addListener(marker, "mouseout", function() {
    	marker.setIcon(imageNormalMidpoint);
    });
    google.maps.event.addListener(marker, "dragstart", function() {
    	for (var i = 0; i < midmarkers.length; i++) {
    		if (midmarkers[i] == marker) {
    			var tmpPath = tmpPolyLine.getPath();
    			tmpPath.push(markers[i].getPosition());
    			tmpPath.push(midmarkers[i].getPosition());
    			tmpPath.push(markers[i+1].getPosition());
    			break;
    		}
    	}
    });
    google.maps.event.addListener(marker, "drag", function() {
    	for (var i = 0; i < midmarkers.length; i++) {
    		if (midmarkers[i] == marker) {
    			tmpPolyLine.getPath().setAt(1, marker.getPosition());
    			break;
    		}
    	}
    });
    google.maps.event.addListener(marker, "dragend", function() {
    	for (var i = 0; i < midmarkers.length; i++) {
    		if (midmarkers[i] == marker) {
    			var newpos = marker.getPosition();
    			var startMarkerPos = markers[i].getPosition();
    			var firstVPos = new google.maps.LatLng(
    				newpos.lat() - (0.5 * (newpos.lat() - startMarkerPos.lat())),
    				newpos.lng() - (0.5 * (newpos.lng() - startMarkerPos.lng()))
    			);
    			var endMarkerPos = markers[i+1].getPosition();
    			var secondVPos = new google.maps.LatLng(
    				newpos.lat() - (0.5 * (newpos.lat() - endMarkerPos.lat())),
    				newpos.lng() - (0.5 * (newpos.lng() - endMarkerPos.lng()))
    			);
    			var newVMarker = setmidmarkers(secondVPos,startMarkerPos);
    			newVMarker.setPosition(secondVPos);//apply the correct position to the midmarker
    			var newMarker = setmarkers(newpos);
    			markers.splice(i+1, 0, newMarker);
    			polyShape.getPath().insertAt(i+1, newpos);
    			marker.setPosition(firstVPos);
    			midmarkers.splice(i+1, 0, newVMarker);
    			tmpPolyLine.getPath().removeAt(2);
    			tmpPolyLine.getPath().removeAt(1);
    			tmpPolyLine.getPath().removeAt(0);
    			/*newpos = null;
    			startMarkerPos = null;
    			firstVPos = null;
    			endMarkerPos = null;
    			secondVPos = null;
    			newVMarker = null;
    			newMarker = null;*/
    			break;
    		}
    	}
        polyPoints = polyShape.getPath();
        var stringtobesaved = newpos.lat().toFixed(6) + ',' + newpos.lng().toFixed(6);
        var kmlstringtobesaved = newpos.lng().toFixed(6) + ',' + newpos.lat().toFixed(6);
        pointsArray.splice(i+1,0,stringtobesaved);
        pointsArrayKml.splice(i+1,0,kmlstringtobesaved);
        logCode1();
    });
    return marker;
}
// Called from listener set in setmarkers
function movemidmarker(index) {
    var newpos = markers[index].getPosition();
    if (index != 0) {
    	var prevpos = markers[index-1].getPosition();
    	midmarkers[index-1].setPosition(new google.maps.LatLng(
    		newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
    		newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
    	));
    	//prevpos = null;
    }
    if (index != markers.length - 1) {
    	var nextpos = markers[index+1].getPosition();
    	midmarkers[index].setPosition(new google.maps.LatLng(
    		newpos.lat() - (0.5 * (newpos.lat() - nextpos.lat())),
    		newpos.lng() - (0.5 * (newpos.lng() - nextpos.lng()))
    	));
    	//nextpos = null;
    }
    //newpos = null;
    //index = null;
}
// Called from listener set in setmarkers
function removemidmarker(index) {
    if (markers.length > 0) {//clicked marker has already been deleted
    	if (index != markers.length) {
    		midmarkers[index].setMap(null);
    		midmarkers.splice(index, 1);
    	} else {
    		midmarkers[index-1].setMap(null);
    		midmarkers.splice(index-1, 1);
    	}
    }
    if (index != 0 && index != markers.length) {
    	var prevpos = markers[index-1].getPosition();
    	var newpos = markers[index].getPosition();
    	midmarkers[index-1].setPosition(new google.maps.LatLng(
    		newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
    		newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
    	));
    	//prevpos = null;
    	//newpos = null;
    }
    //index = null;
}
function showKML() {
    if(codeID != 1) {
        codeID = gob('codechoice').value = 1; // set KML
        setCode();
    }
    gob('coords1').value = kmlheading();
    for (var i = 0; i < placemarks.length; i++) {
        gob('coords1').value += placemarks[i].plmtext;
    }
    gob('coords1').value += kmlend();
}
function showAddress(address) {
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var pos = results[0].geometry.location;
            map.setCenter(pos);
            if(directionsYes == 1) drawDirections(pos);
            if(toolID == 5) drawMarkers(pos);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
function activateDirections() {
    directionsYes = 1;
    directionsintroduction();
}
function closethis(name){
    gob(name).style.visibility = 'hidden';
}
function showthis(name){
    gob(name).style.visibility = 'visible';
}
function iconoptions(chosenicon) {
    gob("st2").value = chosenicon;
    gob("currenticon").innerHTML = '<img src="'+chosenicon+'" alt="" />';
}
// Called from button 'Style Options'
function styleprep() {
    if(gob('toolchoice').value == 6) toolID = 6;
    styleoptions();
}
// Called from styleprep, stepstyles and links in div directionstyles
function styleoptions(){ //present current style
    closethis('polylineoptions');
    closethis('polygonoptions');
    //closethis('rectang');
    closethis('circleoptions');
    closethis('markeroptions');
    closethis('directionstyles');
    if(toolID == 1){
        showthis('polylineoptions');
        //if(plmcur<placemarks.length-1) lcur = placemarks[plmcur].stylecur;
        gob('polylineinput1').value = polylinestyles[lcur].color;
        gob('polylineinput2').value = polylinestyles[lcur].lineopac;
        gob('polylineinput3').value = polylinestyles[lcur].width;
        gob('polylineinput4').value = polylinestyles[lcur].name;
        gob("stylenumberl").innerHTML = (lcur+1)+' ';
    }
    if(toolID == 2 || toolID == 3){
        showthis('polygonoptions');
        //if(plmcur<placemarks.length-1) pcur = placemarks[plmcur].stylecur;
        gob('polygoninput1').value = polygonstyles[pcur].color;
        gob('polygoninput2').value = polygonstyles[pcur].lineopac;
        gob('polygoninput3').value = polygonstyles[pcur].width;
        gob('polygoninput4').value = polygonstyles[pcur].fill;
        gob('polygoninput5').value = polygonstyles[pcur].fillopac;
        gob('polygoninput6').value = polygonstyles[pcur].name;
        gob("stylenumberp").innerHTML = (pcur+1)+' ';
    }
    if(toolID == 4) {
        showthis('circleoptions');
        gob('circinput1').value = circlestyles[ccur].color;
        gob('circinput2').value = circlestyles[ccur].lineopac;
        gob('circinput3').value = circlestyles[ccur].width;
        gob('circinput4').value = circlestyles[ccur].fill;
        gob('circinput5').value = circlestyles[ccur].fillopac;
        gob('circinput6').value = circlestyles[ccur].name;
        gob("stylenumberc").innerHTML = (ccur+1)+' ';
    }
    if(toolID == 5){
        showthis('markeroptions');
        gob('st1').value = markerstyles[mcur].name;
        iconoptions(markerstyles[mcur].icon);
        gob("stylenumberm").innerHTML = (mcur+1)+' ';
    }
    if(toolID == 6){
        showthis('directionstyles');
    }
}
function polylinestyle(e){ //save style
    if(e == 1) {
        createlinestyleobject();
        lcur++;
    }
    polylinestyles[lcur].color = gob('polylineinput1').value;
    polylineDecColorCur = color_hex2dec(polylinestyles[lcur].color);
    polylinestyles[lcur].lineopac = gob('polylineinput2').value;
    if(polylinestyles[lcur].lineopac<0 || polylinestyles[lcur].lineopac>1) return alert('Opacity must be between 0 and 1');
    polylinestyles[lcur].width = gob('polylineinput3').value;
    if(polylinestyles[lcur].width<0 || polylinestyles[lcur].width>20) return alert('Numbers below zero and above 20 are not accepted');
    polylinestyles[lcur].kmlcolor = getopacityhex(polylinestyles[lcur].lineopac) + color_html2kml(""+polylinestyles[lcur].color);
    polylinestyles[lcur].name = gob('polylineinput4').value;
    placemarks[plmcur].style = polylinestyles[lcur].name;
    placemarks[plmcur].stylecur = lcur;
    gob("stylenumberl").innerHTML = (lcur+1)+' ';
    if(polyShape) polyShape.setMap(null);
    preparePolyline();
    if(polyPoints.length > 0) {
        if(codeID == 1) logCode1();
        if(codeID == 2) logCode4();
    }else{
        alert("SAVED!");
    }
}
function polygonstyle(e) {
    if(e == 1) {
        createpolygonstyleobject();
        pcur++;
    }
    polygonstyles[pcur].color = gob('polygoninput1').value;
    polygonDecColorCur = color_hex2dec(polygonstyles[pcur].color);
    polygonstyles[pcur].lineopac = gob('polygoninput2').value;
    if(polygonstyles[pcur].lineopac<0 || polygonstyles[pcur].lineopac>1) return alert('Opacity must be between 0 and 1');
    polygonstyles[pcur].width = gob('polygoninput3').value;
    if(polygonstyles[pcur].width<0 || polygonstyles[pcur].width>20) return alert('Numbers below zero and above 20 are not accepted');
    polygonstyles[pcur].fill = gob('polygoninput4').value;
    polygonFillDecColorCur = color_hex2dec(polygonstyles[pcur].fill);
    polygonstyles[pcur].fillopac = gob('polygoninput5').value;
    if(polygonstyles[pcur].fillopac<0 || polygonstyles[pcur].fillopac>1) return alert('Opacity must be between 0 and 1');
    polygonstyles[pcur].kmlcolor = getopacityhex(polygonstyles[pcur].lineopac) + color_html2kml(""+polygonstyles[pcur].color);
    polygonstyles[pcur].kmlfill = getopacityhex(polygonstyles[pcur].fillopac) + color_html2kml(""+polygonstyles[pcur].fill);
    polygonstyles[pcur].name = gob('polygoninput6').value;
    placemarks[plmcur].style = polygonstyles[pcur].name;
    placemarks[plmcur].stylecur = pcur;
    gob("stylenumberp").innerHTML = (pcur+1)+' ';
    if(polyShape) polyShape.setMap(null);
    if(outerShape) outerShape.setMap(null);
    if(holePolyArray.length > 0) {
        drawpolywithhole();
        if(codeID == 1) logCode3();
        if(codeID == 2) logCode5();
    }
    if(holePolyArray.length == 0) {
        preparePolygon();
        if(polyPoints.length > 0) {
            if(codeID == 1) logCode2();
            if(codeID == 2) logCode4();
        }else{
            alert("SAVED!");
        }
    }
}

function circlestyle(e) {
    if(e == 1) {
        createcirclestyleobject();
        ccur++;
    }
    circlestyles[ccur].color = gob('circinput1').value;
    circlestyles[ccur].lineopac = gob('circinput2').value;
    if(circlestyles[ccur].lineopac<0 || circlestyles[ccur].lineopac>1) return alert('Opacity must be between 0 and 1');
    circlestyles[ccur].width = gob('circinput3').value;
    circlestyles[ccur].fill = gob('circinput4').value;
    circlestyles[ccur].fillopac = gob('circinput5').value;
    if(circlestyles[ccur].fillopac<0 || circlestyles[ccur].fillopac>1) return alert('Opacity must be between 0 and 1');
    circlestyles[ccur].name = gob('circinput6').value;
    placemarks[plmcur].style = circlestyles[ccur].name;
    placemarks[plmcur].stylecur = ccur;
    gob("stylenumberc").innerHTML = (ccur+1)+' ';
    if(circle) circle.setMap(null);
    activateCircle();
    if(radiusPoint) {
        drawCircle();
        logCode7();
    }else{
        alert("SAVED!");
    }
}
function markerstyle(e) {
    if(e == 1) {
        createmarkerstyleobject();
        mcur++;
    }
    markerstyles[mcur].name = gob('st1').value;
    markerstyles[mcur].icon = gob('st2').value;
    placemarks[plmcur].style = markerstyles[mcur].name;
    placemarks[plmcur].stylecur = mcur;
    gob("stylenumberm").innerHTML = (mcur+1)+' ';
    if(markerShape) {
        markerShape.setIcon(markerstyles[mcur].icon);
    }else{
        alert("SAVED!");
    }
}
function stepstyles(a) {
    if(toolID == 1) {
        if(a == -1) {
            if (lcur > 0) {
                lcur--;
                gob("stylenumberl").innerHTML = (lcur+1)+' ';
                styleoptions();
            }
        }
        if(a == 1){
            if (lcur < polylinestyles.length - 1) {
                lcur++;
                gob("stylenumberl").innerHTML = (lcur+1)+' ';
                styleoptions();
            }
        }
        placemarks[plmcur].style = polylinestyles[lcur].name;
        placemarks[plmcur].stylecur = lcur;
        if(polyShape) polyShape.setMap(null);
        preparePolyline();
        if(polyPoints.length) {
            if(codeID == 1) logCode1();
            if(codeID == 2) logCode4();
        }
    }
    if(toolID == 2 || toolID == 3) {
        if(a == -1) {
            if (pcur > 0) {
                pcur--;
                gob("stylenumberp").innerHTML = (pcur+1)+' ';
                styleoptions();
            }
        }
        if(a == 1){
            if (pcur < polygonstyles.length - 1) {
                pcur++;
                gob("stylenumberp").innerHTML = (pcur+1)+' ';
                styleoptions();
            }
        }
        placemarks[plmcur].style = polygonstyles[pcur].name;
        placemarks[plmcur].stylecur = pcur;
        if(polyShape) {
            //alert("polyShape");
            polyShape.setMap(null);
            preparePolygon();
            if(polyPoints.length) {
                if(codeID == 1) logCode2();
                if(codeID == 2) logCode4();
            }
        }
        /*if(rectangle) {
            //alert("polyShape");
            rectangle.setMap(null);
            activateRectangle();
            if(polyPoints.length) {
                if(codeID == 1) logCode2();
                if(codeID == 2) logCode4();
            }
        }*/
    }
    if(toolID == 4) {
        if(a == -1) {
            if (ccur > 0) {
                ccur--;
                gob("stylenumberc").innerHTML = (ccur+1)+' ';
                styleoptions();
            }
        }
        if(a == 1){
            if (ccur < circlestyles.length - 1) {
                ccur++;
                gob("stylenumberc").innerHTML = (ccur+1)+' ';
                styleoptions();
            }
        }
        placemarks[plmcur].style = circlestyles[ccur].name;
        placemarks[plmcur].stylecur = ccur;
        if(circle) circle.setMap(null);
        activateCircle();
        if(radiusPoint) {
            logCode7();
        }
    }
    if(toolID == 5) {
        if(a == -1) {
            if (mcur > 0) {
                mcur--;
                gob("stylenumberm").innerHTML = (mcur+1)+' ';
                styleoptions();
            }
        }
        if(a == 1){
            if (mcur < markerstyles.length - 1) {
                mcur++;
                gob("stylenumberm").innerHTML = (mcur+1)+' ';
                styleoptions();
            }
        }
        placemarks[plmcur].style = markerstyles[mcur].name;
        placemarks[plmcur].stylecur = mcur;
        if(markerShape) {
            markerShape.setIcon(markerstyles[mcur].icon);
            logCode9();
        }
    }
}
function docudetails(){
    gob("plm1").value = placemarks[plmcur].name;
    gob("plm2").value = placemarks[plmcur].desc;
    gob("plm3").value = placemarks[plmcur].tess;
    gob("plm4").value = placemarks[plmcur].alt;
    gob("doc1").value = docuname;
    gob("doc2").value = docudesc;
}
function savedocudetails(){
    docuname = gob("doc1").value;
    docudesc = gob("doc2").value;
    placemarks[plmcur].name = gob("plm1").value;
    placemarks[plmcur].desc = gob("plm2").value;
    placemarks[plmcur].tess = gob("plm3").value;
    placemarks[plmcur].alt = gob("plm4").value;
    if(placemarks[plmcur].poly == "pl") logCode1();
    if(placemarks[plmcur].poly == "pg") logCode2();
}
function mapzoom(){
    var mapZoom = map.getZoom();
    gob("myzoom").value = mapZoom;
}
function mapcenter(){
    var mapCenter = map.getCenter();
    var latLngStr = mapCenter.lat().toFixed(6) + ', ' + mapCenter.lng().toFixed(6);
    gob("centerofmap").value = latLngStr;
}
function showCodeintextarea(){
    if (notext === false){
        gob("presentcode").checked = false;
        notext = true;
    }else{
        gob("presentcode").checked = true;
        notext = false;
        if(polyPoints.length > 0){
            if(toolID==1) { // Polyline
                if(codeID==1) logCode1();
                if(codeID==2) logCode4();
            }
            if(toolID==2) { // Polygon
                if(adder!==0) { // with hole
                    adder = 0;
                    if(codeID == 1) logCode3();
                    if(codeID == 2) logCode5();
                }else{
                    if(codeID==1) logCode2();
                    if(codeID==2) logCode4();
                }
            }
            if(toolID==3) { // Rectangle
                if(codeID == 2) logCode6();
                if(codeID == 1) logCode2();
            }
            if(toolID==5) {  // Marker
                if(codeID == 1) logCode9();
            }
            if(toolID==6) { // Directions
                if(codeID == 1) logCode1a();
            }
        }
        if(toolID==4) { // Circle
            if(codeID == 2) logCode7();
        }
    }
}
// the copy part may not work with all web browsers
function copyTextarea(){
    gob('coords1').focus();
    gob('coords1').select();
    copiedTxt = document.selection.createRange();
    copiedTxt.execCommand("Copy");
}
function color_html2kml(color){
    var newcolor ="FFFFFF";
    if(color.length == 7) newcolor = color.substring(5,7)+color.substring(3,5)+color.substring(1,3);
    return newcolor;
}
function color_hex2dec(color) {
    var deccolor = "255,0,0";
    var dec1 = parseInt(color.substring(1,3),16);
    var dec2 = parseInt(color.substring(3,5),16);
    var dec3 = parseInt(color.substring(5,7),16);
    if(color.length == 7) deccolor = dec1+','+dec2+','+dec3;
    return deccolor;
}
function getopacityhex(opa){
    var hexopa = "66";
    if(opa == 0) hexopa = "00";
    if(opa == .0) hexopa = "00";
    if(opa >= .1) hexopa = "1A";
    if(opa >= .2) hexopa = "33";
    if(opa >= .3) hexopa = "4D";
    if(opa >= .4) hexopa = "66";
    if(opa >= .5) hexopa = "80";
    if(opa >= .6) hexopa = "9A";
    if(opa >= .7) hexopa = "B3";
    if(opa >= .8) hexopa = "CD";
    if(opa >= .9) hexopa = "E6";
    if(opa == 1.0) hexopa = "FF";
    if(opa == 1) hexopa = "FF";
    return hexopa;
}
function kmlheading() {
    var heading = "";
    var styleforpolygon = "";
    var styleforrectangle = "";
    var styleforpolyline = "";
    var styleformarker = "";
    var i;
    heading = '<?xml version="1.0" encoding="UTF-8"?>\n' +
        '<kml xmlns="http://www.opengis.net/kml/2.2">\n' +
        '<Document><name>'+docuname+'</name>\n' +
        '<description>'+docudesc+'</description>\n';
    for(i=0;i<polygonstyles.length;i++) {
        styleforpolygon += '<Style id="'+polygonstyles[i].name+'">\n' +
        '<LineStyle><color>'+polygonstyles[i].kmlcolor+'</color><width>'+polygonstyles[i].width+'</width></LineStyle>\n' +
        '<PolyStyle><color>'+polygonstyles[i].kmlfill+'</color></PolyStyle>\n' +
        '</Style>\n';
    }
    for(i=0;i<polylinestyles.length;i++) {
        styleforpolyline += '<Style id="'+polylinestyles[i].name+'">\n' +
        '<LineStyle><color>'+polylinestyles[i].kmlcolor+'</color><width>'+polylinestyles[i].width+'</width></LineStyle>\n' +
        '</Style>\n';
    }
    for(i=0;i<markerstyles.length;i++) {
        styleformarker += '<Style id="'+markerstyles[i].name+'">\n' +
        '<IconStyle><Icon><href>\n'+markerstyles[i].icon+'\n</href></Icon></IconStyle>\n' +
        '</Style>\n';
    }
    return heading+styleforpolygon+styleforpolyline+styleformarker;
}
function kmlend() {
    var ending;
    return ending = '</Document>\n</kml>';
}
// write kml for polyline in text area
function logCode1(){
    if (notext === true) return;
    var code = ""; // placemarks[plmcur].style = polylinestyles[lcur].name
    var kmltext1 = '<Placemark><name>'+placemarks[plmcur].name+'</name>\n' +
                    '<description>'+placemarks[plmcur].desc+'</description>\n' +
                    '<styleUrl>#'+placemarks[plmcur].style+'</styleUrl>\n' +
                    '<LineString>\n<tessellate>'+placemarks[plmcur].tess+'</tessellate>\n' +
                    '<altitudeMode>'+placemarks[plmcur].alt+'</altitudeMode>\n<coordinates>\n';
    for(var i = 0; i < pointsArrayKml.length; i++) {
        code += pointsArrayKml[i] + ',0\n';
    }
    kmltext2 = '</coordinates>\n</LineString>\n</Placemark>\n';
    placemarks[plmcur].plmtext = kmlcode = kmltext1+code+kmltext2;
    placemarks[plmcur].poly = "pl";
    placemarks[plmcur].jscode = pointsArray;
    placemarks[plmcur].kmlcode = pointsArrayKml;
    gob('coords1').value = kmlheading()+kmltext1+code+kmltext2+kmlend();
}
// write kml for Directions in text area
function logCode1a(){
    if (notext === true) return;
    gob('coords1').value = "";
    var code = "";
    //var kmlMarker = "";
    //var kmlMarkers = "";
    var kmltext1 = '<Placemark><name>'+placemarks[dirline].name+'</name>\n' +
                    '<description>'+placemarks[dirline].desc+'</description>\n' +
                    '<styleUrl>#'+placemarks[dirline].style+'</styleUrl>\n' +
                    '<LineString>\n<tessellate>'+placemarks[dirline].tess+'</tessellate>\n' +
                    '<altitudeMode>'+placemarks[dirline].alt+'</altitudeMode>\n<coordinates>\n';
    if(pointsArrayKml.length != 0) {
        for(var i = 0; i < pointsArrayKml.length; i++) {
            code += pointsArrayKml[i] + ',0\n';
        }
        placemarks[dirline].jscode = pointsArray;
        placemarks[dirline].kmlcode = pointsArrayKml;
    }
    kmltext2 = '</coordinates>\n</LineString>\n</Placemark>\n';
    placemarks[dirline].plmtext = kmltext1+code+kmltext2;
    placemarks[dirline].poly = "pl";
    gob('coords1').value = kmlheading()+kmltext1+code+kmltext2;
    if(markersArrayKml.length != 0) {
        for(i = 0; i < markersArrayKml.length; i++) {
            var kmlMarker = "";
            var m = dirline + 1;
            kmlMarker += '<Placemark><name>'+placemarks[m+i].name+'</name>\n' +
                            '<description>'+addresssArray[i]+'</description>\n' +
                            '<styleUrl>#'+markerstyles[mcur].name+'</styleUrl>\n' +
                            '<Point>\n<coordinates>';
            kmlMarker += markersArrayKml[i] + ',0\n';
            kmlMarker += '</coordinates>\n</Point>\n</Placemark>\n';
            placemarks[m+i].jscode = markersArray[i];
            placemarks[m+i].kmlcode = markersArrayKml[i];
            placemarks[m+i].plmtext = kmlMarker;
            gob('coords1').value += kmlMarker;
        }
    }
    //placemarks[dirline].plmtext = kmlcode = kmltext1+code+kmltext2+kmlMarkers;
    gob('coords1').value += kmlend();
}
// write kml for polygon in text area
function logCode2(){
    if (notext === true) return;
    var code = "";
    var kmltext1 = '<Placemark><name>'+placemarks[plmcur].name+'</name>\n' +
                    '<description>'+placemarks[plmcur].desc+'</description>\n' +
                    '<styleUrl>#'+placemarks[plmcur].style+'</styleUrl>\n' +
                    '<Polygon>\n<tessellate>'+placemarks[plmcur].tess+'</tessellate>\n' +
                    '<altitudeMode>'+placemarks[plmcur].alt+'</altitudeMode>\n' +
                    '<outerBoundaryIs><LinearRing><coordinates>\n';
    if(pointsArrayKml.length != 0) {
        for(var i = 0; i < pointsArrayKml.length; i++) {
            code += pointsArrayKml[i] + ',0\n';
        }
        code += pointsArrayKml[0] + ',0\n';
        placemarks[plmcur].jscode = pointsArray;
        placemarks[plmcur].kmlcode = pointsArrayKml;
    }
    kmltext2 = '</coordinates></LinearRing></outerBoundaryIs>\n</Polygon>\n</Placemark>\n';
    placemarks[plmcur].plmtext = kmlcode = kmltext1+code+kmltext2;
    placemarks[plmcur].poly = "pg";
    gob('coords1').value = kmlheading()+kmltext1+code+kmltext2+kmlend();
}
// write kml for polygon with hole
function logCode3(){
    if (notext === true) return;
    var code = "";
    var kmltext = '<Placemark><name>'+placemarks[plmcur].name+'</name>\n' +
                    '<description>'+placemarks[plmcur].desc+'</description>\n' +
                    '<styleUrl>#'+placemarks[plmcur].style+'</styleUrl>\n' +
                    '<Polygon>\n<tessellate>'+placemarks[plmcur].tess+'</tessellate>\n' +
                    '<altitudeMode>'+placemarks[plmcur].alt+'</altitudeMode>\n' +
                    '<outerBoundaryIs><LinearRing><coordinates>\n';
    for(var i = 0; i < outerArrayKml.length; i++) {
        kmltext += outerArrayKml[i]+',0\n';
        code += outerArrayKml[i]+',0\n';
    }
    kmltext += outerArrayKml[0]+',0\n';
    code += outerArrayKml[0]+',0\n';
    placemarks[plmcur].jscode = pointsArray;
    placemarks[plmcur].kmlcode = outerArrayKml;
    placemarks[plmcur].kmlholecode = innerArraysKml;
    placemarks[plmcur].poly = "pgh";
    kmltext += '</coordinates></LinearRing></outerBoundaryIs>\n';
    for(var m = 0; m < innerArraysKml.length; m++) {
        kmltext += '<innerBoundaryIs><LinearRing><coordinates>\n';
        for(var i = 0; i < innerArraysKml[m].length; i++) {
            kmltext += innerArraysKml[m][i]+',0\n';
        }
        kmltext += innerArraysKml[m][0]+',0\n';
        kmltext += '</coordinates></LinearRing></innerBoundaryIs>\n';
    }
    kmltext += '</Polygon>\n</Placemark>\n';
    placemarks[plmcur].plmtext = kmlcode = kmltext;
    gob('coords1').value = kmlheading()+kmltext+kmlend();
}
// write javascript
function logCode4(){
    if (notext === true) return;
    gob('coords1').value = 'var myCoordinates = [\n';
    for(var i=0; i<pointsArray.length; i++){
        if(i == pointsArray.length-1){
            gob('coords1').value += 'new google.maps.LatLng('+pointsArray[i] + ')\n';
        }else{
            gob('coords1').value += 'new google.maps.LatLng('+pointsArray[i] + '),\n';
        }
    }
    if(toolID == 1){
        gob('coords1').value += '];\n';
        var options = 'var polyOptions = {\n'
        +'path: myCoordinates,\n'
        +'strokeColor: "'+polylinestyles[lcur].color+'",\n'
        +'strokeOpacity: '+polylinestyles[lcur].lineopac+',\n'
        +'strokeWeight: '+polylinestyles[lcur].width+'\n'
        +'}\n';
        gob('coords1').value += options;
        gob('coords1').value +='var it = new google.maps.Polyline(polyOptions);\n'
        +'it.setMap(map);\n';
    }
    if(toolID == 2){
        gob('coords1').value += '];\n';
        var options = 'var polyOptions = {\n'
        +'path: myCoordinates,\n'
        +'strokeColor: "'+polygonstyles[pcur].color+'",\n'
        +'strokeOpacity: '+polygonstyles[pcur].lineopac+',\n'
        +'strokeWeight: '+polygonstyles[pcur].width+',\n'
        +'fillColor: "'+polygonstyles[pcur].fill+'",\n'
        +'fillOpacity: '+polygonstyles[pcur].fillopac+'\n'
        +'}\n';
        gob('coords1').value += options;
        gob('coords1').value +='var it = new google.maps.Polygon(polyOptions);\n'
        +'it.setMap(map);\n';
    }
    javacode = gob('coords1').value;
}
// write javascript for polygon with hole
function logCode5() {
    if (notext === true) return;
    var hstring = "";
    gob('coords1').value = 'var outerPoints = [\n';
    for(var i=0; i<outerArray.length; i++){
        if(i == outerArray.length-1){
            gob('coords1').value += 'new google.maps.LatLng('+outerArray[i] + ')\n'; // without trailing comma
        }else{
            gob('coords1').value += 'new google.maps.LatLng('+outerArray[i] + '),\n';
        }
    }
    gob('coords1').value += '];\n';
    for(var m=0; m<innerArrays.length; m++){
        gob('coords1').value += 'var innerPoints'+m+' = [\n';
        var holestring = 'innerPoints'+m;
        if(m<innerArrays.length-1) holestring += ',';
        hstring += holestring;
        for(i=0; i<innerArrays[m].length; i++){
            if(i == innerArrays[m].length-1){
                gob('coords1').value += 'new google.maps.LatLng('+innerArrays[m][i] + ')\n';
            }else{
                gob('coords1').value += 'new google.maps.LatLng('+innerArrays[m][i] + '),\n';
            }
        }
        gob('coords1').value += '];\n';
    }
    gob('coords1').value += 'var myCoordinates = [outerPoints,'+hstring+'];\n';
    gob('coords1').value += 'var polyOptions = {\n'
    +'paths: myCoordinates,\n'
    +'strokeColor: "'+polygonstyles[pcur].color+'",\n'
    +'strokeOpacity: '+polygonstyles[pcur].lineopac+',\n'
    +'strokeWeight: '+polygonstyles[pcur].width+',\n'
    +'fillColor: "'+polygonstyles[pcur].fill+'",\n'
    +'fillOpacity: '+polygonstyles[pcur].fillopac+'\n'
    +'};\n'
    +'var it = new google.maps.Polygon(polyOptions);\n'
    +'it.setMap(map);\n';
    javacode = gob('coords1').value;
}
// write javascript or kml for rectangle
function logCode6() {
    if (notext === true) return;
    //placemarks[plmcur].style = polygonstyles[pcur].name;
    if(codeID == 2) { // javascript
        gob('coords1').value = 'var rectangle = new google.maps.Rectangle({\n'
            +'map: map,\n'
            +'fillColor: '+polygonstyles[pcur].fill+',\n'
            +'fillOpacity: '+polygonstyles[pcur].fillopac+',\n'
            +'strokeColor: '+polygonstyles[pcur].color+',\n'
            +'strokeOpacity: '+polygonstyles[pcur].lineopac+',\n'
            +'strokeWeight: '+polygonstyles[pcur].width+'\n'
            +'});\n';
        gob('coords1').value += 'var sWest = new google.maps.LatLng('+southWest.lat().toFixed(6)+','+southWest.lng().toFixed(6)+');\n'
        +'var nEast = new google.maps.LatLng('+northEast.lat().toFixed(6)+','+northEast.lng().toFixed(6)+');\n'
        +'var bounds = new google.maps.LatLngBounds(sWest,nEast);\n'
        +'rectangle.setBounds(bounds);\n';
        gob('coords1').value += '\n\\\\ Code for polyline rectangle\n';
        gob('coords1').value += 'var myCoordinates = [\n';
        gob('coords1').value += southWest.lat().toFixed(6) + ',' + southWest.lng().toFixed(6) + ',\n' +
                    southWest.lat().toFixed(6) + ',' + northEast.lng().toFixed(6) + ',\n' +
                    northEast.lat().toFixed(6) + ',' + northEast.lng().toFixed(6) + ',\n' +
                    northEast.lat().toFixed(6) + ',' + southWest.lng().toFixed(6) + ',\n' +
                    southWest.lat().toFixed(6) + ',' + southWest.lng().toFixed(6) + '\n';
        gob('coords1').value += '];\n';
        var options = 'var polyOptions = {\n'
        +'path: myCoordinates,\n'
        +'strokeColor: "'+polygonstyles[pcur].color+'",\n'
        +'strokeOpacity: '+polygonstyles[pcur].lineopac+',\n'
        +'strokeWeight: '+polygonstyles[pcur].width+'\n'
        +'}\n';
        gob('coords1').value += options;
        gob('coords1').value +='var it = new google.maps.Polyline(polyOptions);\n'
        +'it.setMap(map);\n';
        javacode = gob('coords1').value;
    }
    if(codeID == 1) { // kml
        var kmltext = '<Placemark><name>'+placemarks[plmcur].name+'</name>\n' +
                        '<description>'+placemarks[plmcur].desc+'</description>\n' +
                        '<styleUrl>#'+placemarks[plmcur].style+'</styleUrl>\n' +
                        '<Polygon>\n<tessellate>'+placemarks[plmcur].tess+'</tessellate>\n' +
                        '<altitudeMode>'+placemarks[plmcur].alt+'</altitudeMode>\n' +
                        '<outerBoundaryIs><LinearRing><coordinates>\n';
        kmltext += southWest.lng().toFixed(6) + ',' + southWest.lat().toFixed(6) + ',0\n' +
                    southWest.lng().toFixed(6) + ',' + northEast.lat().toFixed(6) + ',0\n' +
                    northEast.lng().toFixed(6) + ',' + northEast.lat().toFixed(6) + ',0\n' +
                    northEast.lng().toFixed(6) + ',' + southWest.lat().toFixed(6) + ',0\n' +
                    southWest.lng().toFixed(6) + ',' + southWest.lat().toFixed(6) + ',0\n';
        kmltext += '</coordinates></LinearRing></outerBoundaryIs>\n</Polygon>\n</Placemark>\n';
        placemarks[plmcur].plmtext = kmlcode = kmltext;
        gob('coords1').value = kmlheading()+kmltext+kmlend();
    }
}
function logCode7() { // javascript for circle
    if (notext === true) return;
    //placemarks[plmcur].style = circlestyles[ccur].name;
    gob('coords1').value = 'var circle = new google.maps.Circle({\n'
        +'map: map,\n'
        +'center: new google.maps.LatLng('+centerPoint.lat().toFixed(6)+','+centerPoint.lng().toFixed(6)+'),\n'
        +'fillColor: '+circlestyles[ccur].fill+',\n'
        +'fillOpacity: '+circlestyles[ccur].fillopac+',\n'
        +'strokeColor: '+circlestyles[ccur].color+',\n'
        +'strokeOpacity: '+circlestyles[ccur].lineopac+',\n'
        +'strokeWeight: '+circlestyles[ccur].width+'\n'
        +'});\n';
    gob('coords1').value += 'circle.setRadius('+calc+');\n';
    javacode = gob('coords1').value;
}
function logCode8(){ //javascript for Marker
    if(notext === true) return;
    var text = 'var image = \''+markerstyles[mcur].icon+'\';\n'
        +'var marker = new google.maps.Marker({\n'
        +'position: '+placemarks[plmcur].point+',\n'
        +'map: map, //global variable \'map\' from opening function\n'
        +'icon: image\n'
        +'});\n'
        +'//Your content for the infowindow\n'
        +'var html = \'<b>'+ placemarks[plmcur].name +'</b> <br/>'+ placemarks[plmcur].desc +'\';';
    gob('coords1').value = text;
    javacode = gob('coords1').value;
}
function logCode9() { //KML for marker
    if(notext === true) return;
    gob('coords1').value = "";
    var kmlMarkers = "";
    kmlMarkers += '<Placemark><name>'+placemarks[plmcur].name+'</name>\n' +
                    '<description>'+placemarks[plmcur].desc+'</description>\n' +
                    '<styleUrl>#'+placemarks[plmcur].style+'</styleUrl>\n' +
                    '<Point>\n<coordinates>';
    kmlMarkers += placemarks[plmcur].kmlcode + ',0';
    kmlMarkers += '</coordinates>\n</Point>\n</Placemark>\n';
    //placemarks[plmcur].poly = "pl";
    placemarks[plmcur].plmtext = kmlcode = kmlMarkers;
    gob('coords1').value = kmlheading()+kmlMarkers+kmlend();
}

function directionsintroduction() {
    gob('coords1').value = 'Ready for Directions. Create a route along roads with markers at chosen locations.\n'
            +'Click on the map, or enter an address and click "Search", to place a marker.\n'
            +'Lines will be drawn along roads from marker to marker.\n'
            +'Use "Delete Last Point" if you want to undo.\n'
            +'KML input may be done at any time for markers by clicking on them.\n'
            +'KML input for the line may be done by clicking on it after you have finished '
            +'drawing and clicked "Next shape".';
}
function markerintroduction() {
    gob('coords1').value = 'Ready for Marker. Click on the map, or enter an address and click "Search", to place a marker.\n'
            +'You may enter your content for the infowindow with "KML input" even if your code choice is Javascript.\n'
            +'Click "Next shape" before each additional marker.';
}
function polylineintroduction() {
    gob('coords1').value = 'Ready for Polyline. Click on the map. The code for the shape you create will be presented here.\n\n'
                        +'When finished with a shape, click Next shape and draw another shape, if you wish.\n'
                        +'\nIf you want to edit a saved polyline or polygon, click on it. Then click Edit lines. '
                        +'When editing, you may remove a point with a click on it.\n'
                        +'\nThe complete KML code for what you have created, is always available with Show KML.';
}
function polygonintroduction() {
    gob('coords1').value = 'Ready for Polygon. Click on the map. The code for the shape you create will be presented here. '
            +'The Maps API will automatically "close" any polygons by drawing a stroke connecting the last coordinate back to the '
            +'first coordinate for any given paths.\n'
            +'\nTo create a polygon with hole(-s), click "Hole" before you start the drawing.\n'
            +'\nWhen finished with a shape, click Next shape and draw another shape, if you wish.\n'
            +'\nIf you want to edit a saved polyline or polygon, click on it. Then click Edit lines. '
            +'When editing, you may remove a point with a click on it.\n'
            +'\nThe complete KML code for what you have created, is always available with Show KML.';
}
function rectangleintroduction() {
    gob('coords1').value = 'Ready for Rectangle. Click two times on the map - first for the southwest and '+
            'then for the northeast corner. You may resize and move '+
            'the rectangle with the two draggable markers you then have.\n\n'+
            'The v3 Rectangle is a polygon. But in Javascript code mode an extra code for '+
            'polyline is presented here in the text area.';
}
function circleintroduction() {
    gob('coords1').value = 'Ready for Circle. Click for center. Then click for radius distance. '+
    'You may resize and move the circle with the two draggable markers you then have.\n\n'+
    'KML code is not available for Circle.';
}
//]]>
</script>

<style type="text/css">
* {margin:0;padding:0;border:0;outline:0}
BODY {
    font-family: "Trebuchet MS", Arial,Helvetica,Sans Serif;
    font-size: 10pt;
}
a  {
	text-decoration : none;
}
a:hover  {
	text-decoration: underline;
}
p {
    padding-bottom: 8px;
}
#coords1 {
    padding: 5px;
    font-weight: bold;
}
#presenter {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter:”alpha(opacity=70)”;
    -moz-opacity:0.7;
    KHTMLOpacity: 0.7;
    MozOpacity: 0.7;
    -khtml-opacity:.70;
}
#buttonrow {
    position: absolute;
    top: 50px;
    left: 540px;
    width: 505px;
    height: 80px;
}
#presenter {
    position: absolute;
    top: 160px;
    left: 540px;
    width: 523px;
    height: 413px;
    border: 2px solid #ccc;
}
#header {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 1020px;
    height: 40px;
    background-color: #ffffff;
}
#map_canvas {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 530px;
    height: 530px;
    background-color: #ffffff;
}
#polygonstuff {
    position: absolute;
    top: 400px;
    left: 5px;
    width: 70px;
    height: 60px;
    background-color: #ff0000;
    color: #ffffff;
    visibility: hidden;
}
#title {
    background-color: transparent;
    width: 300px;
    float: left;
}
.choice {
    background-color: transparent;
    width: 100px;
    float: left;
}
h1 {
    font-size:25px;
    font-weight: bold;
    color: #ff0000;
    padding-top: 4px;
    padding-left: 10px;
    padding-bottom: 11px;
}
.topbutton {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    float: left;
}
#googlead {
    margin: 0 auto;
    width: 800px;
    padding-top: 5px;
}
.clear {
	clear:both;
}
#content {
    margin: 10px
}
#polylineoptions {
    position: absolute;
    background-color: #ffffff;
    top: 200px;
    left: 560px;
    width: 260px;
    height: 210px;
    border: 2px solid #337EB7;
    visibility: hidden;
}
#polygonoptions {
    position: absolute;
    background-color: #ffffff;
    top: 200px;
    left: 560px;
    width: 260px;
    height: 255px;
    border: 2px solid #337EB7;
    visibility: hidden;
}
#rectang {
    position: absolute;
    background-color: #ffffff;
    top: 200px;
    left: 560px;
    width: 260px;
    height: 260px;
    border: 2px solid #337EB7;
    visibility: hidden;
}
#circleoptions {
    position: absolute;
    background-color: #ffffff;
    top: 200px;
    left: 560px;
    width: 260px;
    height: 260px;
    border: 2px solid #337EB7;
    visibility: hidden;
}
#markeroptions {
    width: 950px;
    height: 310px;
    background-color: #ffffff;
    margin: 2px 2px 2px 2px;
    padding: 8px;
    border: 1px solid #aaa;
    position: absolute;
    top: 45px;
    left: 10px;
    z-index:99999;
    visibility:hidden;
}
#directionstyles {
    position: absolute;
    background-color: #ffffff;
    top: 200px;
    left: 560px;
    width: 260px;
    height: 210px;
    border: 2px solid #337EB7;
    visibility: hidden;
}
#iconimages {
    width: 430px;
    height: 300px;
    background-color: #ffffff;
    margin: 2px 2px 2px 2px;
    padding: 8px;
    float: left;
}
#stylestext {
    width: 485px;
    height: 280px;
    background-color: #ffffff;
    margin: 0px 0px 2px 2px;
    padding: 5px;
    float: left;
}
#toppers {
    width: 405px;
    height: 300px;
    background-color: #ffffff;
    margin: 2px 2px 2px 2px;
    padding: 8px;
    position: absolute;
    top: 165px;
    left: 90px;
    z-index:99999;
    visibility:hidden;
}
.styletitle {
    margin-left:5px;
    padding:0 3px 0 5px;
    font-weight:bold;
    background-color: #CCCCFF;
}
.closebutton {
    border:1px solid #000000;
    padding:1px 4px 1px 4px;
    margin:1px 3px 1px 0px;
    color:#ffffff;
    background-color: #337EB7;
}
#RegretButton {
    visibility: hidden;
}
.label {
	float: left;
	text-align: right;
	margin-right: 5px;
	width: 80px;
	padding-top: 5px;
}
.input {
    float: left;
	padding-left: 3px;
	width: 55px;
	margin: 3px 0px 0px 3px;
	border: 2px solid #ccc;
}
.inputlong {
    float: left;
	padding-left: 3px;
	width: 75px;
	margin: 3px 0px 0px 3px;
	border: 2px solid #ccc;
}
.oklink {
    margin-left: 25px;
    padding:0px 3px 0px 3px;
    background-color: #CCFF66;
    text-decoration: none;
}
#morelinks td {
    padding-right: 10px;
}
</style>
<script src="v3tool-Dateien/commonutilmappoly.js" charset="UTF-8" type="text/javascript"></script><script src="v3tool-Dateien/geocoderonion.js" charset="UTF-8" type="text/javascript"></script><script src="v3tool-Dateien/controls.js" charset="UTF-8" type="text/javascript"></script><script src="v3tool-Dateien/stats.js" charset="UTF-8" type="text/javascript"></script><script src="v3tool-Dateien/marker.js" charset="UTF-8" type="text/javascript"></script></head>

<body id="body" onload="initmap()">

<div style="background-color: rgb(229, 227, 223); overflow: hidden;" id="map_canvas"><div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1; cursor: default;"><div style="z-index: 100; position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; position: absolute; left: -4px; top: 1px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -4px; top: 257px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 252px; top: 1px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 252px; top: 257px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -260px; top: 1px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -260px; top: 257px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -4px; top: -255px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -4px; top: 513px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 252px; top: -255px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 252px; top: 513px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 508px; top: 1px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 508px; top: 257px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -260px; top: -255px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -260px; top: 513px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 508px; top: -255px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 508px; top: 513px;"></div></div></div></div><div style="z-index: 101; position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 0px; top: 0px; z-index: 3;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 1px;"><canvas style="position: absolute; left: 0px; top: 0px;" height="256" width="256"></canvas></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 257px;"><canvas style="position: absolute; left: 0px; top: 0px;" height="256" width="256"></canvas></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 1px;"><canvas style="position: absolute; left: 0px; top: 0px;" height="256" width="256"></canvas></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 257px;"><canvas style="position: absolute; left: 0px; top: 0px;" height="256" width="256"></canvas></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 1px;"><canvas style="position: absolute; left: 0px; top: 0px;" height="256" width="256"></canvas></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 513px;"></div></div></div></div><div style="z-index: 102; position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 513px;"></div></div></div></div><div style="z-index: 103; position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 0px; top: 0px; z-index: -1;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -4px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 252px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 1px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 257px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -260px; top: 513px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: -255px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 508px; top: 513px;"></div></div></div></div><div style="z-index: 104; position: absolute; left: 0px; top: 0px;"></div><div style="z-index: 105; position: absolute; left: 0px; top: 0px;"></div><div style="z-index: 106; position: absolute; left: 0px; top: 0px;"><div style="z-index: -202; cursor: pointer; display: none;"><div style="width: 30px; height: 27px; overflow: hidden; position: absolute;"><img src="v3tool-Dateien/undo_poly.png" style="position: absolute; left: 0px; top: 0px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 90px; height: 27px;"></div></div></div><div style="position: absolute; z-index: 0; left: 0px; top: 0px;"><div style="overflow: hidden; width: 530px; height: 530px;"></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; position: absolute; left: -4px; top: -255px;"><img src="v3tool-Dateien/vt_009.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -4px; top: 1px;"><img src="v3tool-Dateien/vt.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 252px; top: 1px;"><img src="v3tool-Dateien/vt_007.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 252px; top: 257px;"><img src="v3tool-Dateien/vt_004.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 508px; top: 1px;"><img src="v3tool-Dateien/vt_013.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -4px; top: 257px;"><img src="v3tool-Dateien/vt_014.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -4px; top: 513px;"><img src="v3tool-Dateien/vt_015.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -260px; top: 1px;"><img src="v3tool-Dateien/vt_006.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 252px; top: -255px;"><img src="v3tool-Dateien/vt_005.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 252px; top: 513px;"><img src="v3tool-Dateien/vt_002.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -260px; top: 257px;"><img src="v3tool-Dateien/vt_010.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 508px; top: 257px;"><img src="v3tool-Dateien/vt_016.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 508px; top: -255px;"><img src="v3tool-Dateien/vt_003.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 508px; top: 513px;"><img src="v3tool-Dateien/vt_012.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -260px; top: -255px;"><img src="v3tool-Dateien/vt_011.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -260px; top: 513px;"><img src="v3tool-Dateien/vt_008.png" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div></div></div></div></div><div style="margin: 2px 5px 2px 2px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;"><a href="http://maps.google.com/maps?ll=60.754117,13.377339&amp;z=10&amp;t=m&amp;hl=de-DE" target="_blank" title="Klicken, um diese Region in Google Maps anzuzeigen" style="position: static; overflow: visible; float: none; display: inline;"><div style="width: 62px; height: 24px; cursor: pointer;"><img src="v3tool-Dateien/google_white.png" style="position: absolute; left: 0px; top: 0px; width: 62px; height: 24px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div></a></div><div style="z-index: 1000001; position: absolute; right: 0px; bottom: 0px;" class="gmnoprint"><div style="height: 19px; -moz-user-select: none; line-height: 19px; padding-right: 2px; padding-left: 50px; background: -moz-linear-gradient(left center , rgba(255, 255, 255, 0) 0pt, rgba(255, 255, 255, 0.5) 50px) repeat scroll 0% 0% transparent; font-family: Arial,sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right;"><a style="color: rgb(68, 68, 68); text-decoration: underline; cursor: pointer; display: none;">Kartendaten</a><span style="">Kartendaten ©2012 Google</span><span style=""> - </span><a target="_blank" href="http://www.google.com/intl/de-DE_US/help/terms_maps.html" style="color: rgb(68, 68, 68); text-decoration: underline; cursor: pointer;">Nutzungsbedingungen</a></div></div><div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Arial,sans-serif; color: rgb(34, 34, 34); box-shadow: 0pt 4px 16px rgba(0, 0, 0, 0.2); z-index: 10000002; display: none; width: 256px; height: 148px; position: absolute; left: 115px; top: 175px;"><div style="padding: 0pt 0pt 10px; font-size: 16px;">Kartendaten</div><div style="font-size: 13px;">Kartendaten ©2012 Google</div><div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 12px; z-index: 10000; cursor: pointer;"><img src="v3tool-Dateien/imgs8.png" style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div></div><div style="position: absolute; right: 0px; bottom: 0px;" class="gmnoscreen"><div style="font-family: Arial,sans-serif; font-size: 10px; color: rgb(68, 68, 68); direction: ltr; text-align: right; background-color: rgb(245, 245, 245);">Kartendaten ©2012 Google</div></div><div class="gmnoprint" style="display: none; font-size: 10px; height: 17px; background-color: rgb(245, 245, 245); border: 1px solid rgb(220, 220, 220); line-height: 19px; position: absolute; right: 0px; bottom: 0px;"><a href="http://maps.google.com/maps?ll=60.754117,13.377339&amp;z=10&amp;t=m&amp;hl=de-DE&amp;skstate=action:rmi_dialog$apiref:1$location:60.754117,13.377339" style="font-family: Arial,sans-serif; font-size: 85%; font-weight: bold; padding: 1px 3px; color: rgb(68, 68, 68); text-decoration: none; position: relative; bottom: 1px;" title="Google falsche Straßenkarte oder Bilder melden" target="_new">Einen Fehler bei Google Maps melden</a></div><div style="margin-bottom: 3px; -moz-user-select: none; width: 112px; height: 26px; color: rgb(0, 0, 0); font-family: Arial,sans-serif; font-size: 11px; position: absolute; left: 69px; bottom: 0px;"><div style="width: 4px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px;"><img src="v3tool-Dateien/mapcontrols3d6.png" style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div><div style="width: 108px; height: 4px; overflow: hidden; position: absolute; left: 3px; top: 11px;"><img src="v3tool-Dateien/mapcontrols3d6.png" style="position: absolute; left: 0px; top: -424px; width: 108px; height: 492px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="position: absolute; left: 0px; top: 11px; width: 1px; height: 4px; overflow: hidden;"><img src="v3tool-Dateien/mapcontrols3d6.png" style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div><div class="gmnoprint" style="position: absolute; left: 0px; top: 11px; width: 1px; height: 4px; overflow: hidden; right: 0px;"><img src="v3tool-Dateien/mapcontrols3d6.png" style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div><div style="width: 4px; height: 12px; overflow: hidden; position: absolute; left: 67px; top: 0px;"><img src="v3tool-Dateien/mapcontrols3d6.png" style="position: absolute; left: -4px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div><div style="width: 4px; height: 12px; overflow: hidden; position: absolute; left: 108px; top: 14px;"><img src="v3tool-Dateien/mapcontrols3d6.png" style="position: absolute; left: -8px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div><div style="position: absolute; left: 8px; bottom: 15px; direction: ltr;">5 km</div><div style="position: absolute; left: 8px; top: 15px; direction: ltr;">5 Meilen</div></div><div controlheight="311" controlwidth="78" style="margin: 5px; -moz-user-select: none; position: absolute; left: 0px; top: 0px;" class="gmnoprint"><div style="cursor: url(&quot;http://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;), default; width: 78px; height: 78px; position: absolute; left: 0px; top: 0px;" controlheight="80" controlwidth="78" class="gmnoprint"><div style="width: 78px; height: 78px; position: absolute; left: 0px; top: 0px;" controlheight="80" controlwidth="78" class="gmnoprint"><div style="visibility: hidden;"><svg viewBox="0 0 78 78" height="78px" width="78px" overflow="hidden" version="1.1" style="position: absolute; left: 0px; top: 0px;"><circle stroke="#f2f4f6" fill="#f2f4f6" fill-opacity="0.2" stroke-width="3" r="35" cy="39" cx="39"></circle><g transform="rotate(0 39 39)"><rect fill="#f2f4f6" stroke-width="1" stroke="#a6a6a6" height="11" width="12" ry="4" rx="4" y="0" x="33"></rect><polyline stroke="#000" fill="#f2f4f6" stroke-width="1.5" stroke-linejoin="bevel" points="36.5,8.5 36.5,2.5 41.5,8.5 41.5,2.5"></polyline></g></svg></div></div><div style="position: absolute; left: 10px; top: 11px;" controlheight="59" controlwidth="59" class="gmnoprint"><div style="width: 59px; height: 59px; overflow: hidden; position: relative;"><img src="v3tool-Dateien/mapcontrols3d7.png" style="position: absolute; left: 0px; top: 0px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"><div title="Nach links verschieben" style="position: absolute; left: 0px; top: 20px; width: 19.6667px; height: 19.6667px; cursor: pointer;"></div><div title="Nach rechts verschieben" style="position: absolute; left: 39px; top: 20px; width: 19.6667px; height: 19.6667px; cursor: pointer;"></div><div title="Nach oben verschieben" style="position: absolute; left: 20px; top: 0px; width: 19.6667px; height: 19.6667px; cursor: pointer;"></div><div title="Nach unten verschieben" style="position: absolute; left: 20px; top: 39px; width: 19.6667px; height: 19.6667px; cursor: pointer;"></div></div></div></div><div controlheight="0" controlwidth="0" style="opacity: 0.6; display: none; position: absolute;" class="gmnoprint"><img title="Karte um 90&nbsp;Grad drehen" style="-moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; cursor: pointer; width: 22px; height: 22px;" src="v3tool-Dateien/rotate2.png"></div><div controlheight="226" controlwidth="25" style="position: absolute; left: 27px; top: 85px;" class="gmnoprint"><div title="Vergrößern" style="width: 23px; height: 24px; overflow: hidden; position: relative; cursor: pointer; z-index: 1;"><img src="v3tool-Dateien/mapcontrols3d7.png" style="position: absolute; left: -17px; top: -400px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div><div title="Klicken zum Zoomen" style="width: 25px; height: 178px; overflow: hidden; position: relative; cursor: pointer; top: -4px;"><img src="v3tool-Dateien/mapcontrols3d7.png" style="position: absolute; left: -17px; top: -87px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div><div title="Ziehen zum Zoomen" style="width: 21px; height: 14px; overflow: hidden; position: absolute; -moz-transition: top 0.25s ease 0s; z-index: 2; cursor: url(&quot;http://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;), default; left: 2px; top: 108px;"><img src="v3tool-Dateien/mapcontrols3d7.png" style="position: absolute; left: 0px; top: -384px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div><div title="Verkleinern" style="width: 23px; height: 23px; overflow: hidden; position: relative; cursor: pointer; top: -4px; z-index: 3;"><img src="v3tool-Dateien/mapcontrols3d7.png" style="position: absolute; left: -17px; top: -361px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"></div></div></div><div style="margin: 5px; z-index: 0; position: absolute; cursor: pointer; text-align: left; width: 85px; right: 0px; top: 0px;" class="gmnoprint"><div title="Kartenstil ändern" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(0, 0, 0); font-family: Arial,sans-serif; -moz-user-select: none; font-size: 13px; background: -moz-linear-gradient(center top , rgb(255, 255, 255), rgb(230, 230, 230)) repeat scroll 0% 0% transparent; padding: 1px 6px; border: 1px solid rgb(113, 123, 135); box-shadow: 0pt 2px 4px rgba(0, 0, 0, 0.4); font-weight: bold;">Karte<img style="-moz-user-select: none; border: 0px none; padding: 0px; margin: -2px 0px 0px; position: absolute; right: 6px; top: 50%; width: 7px; height: 4px;" src="v3tool-Dateien/arrow-down.png"></div><div style="background-color: white; z-index: -1; padding-top: 2px; border-width: 0pt 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(113, 123, 135) rgb(113, 123, 135); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none; box-shadow: 0pt 2px 4px rgba(0, 0, 0, 0.4); position: relative; text-align: left; display: none;"><div title="Stadtplan anzeigen" style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 13px; background-color: rgb(255, 255, 255); padding: 2px 5px 3px; font-weight: bold;">Karte</div><div title="Satellitenbilder anzeigen" style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 13px; background-color: rgb(255, 255, 255); padding: 2px 5px 3px;">Satellit</div><div style="margin: 1px 0pt; border-top: 1px solid rgb(235, 235, 235);"></div><div title="Stadtplan mit Gelände anzeigen" style="color: rgb(0, 0, 0); font-family: Arial,sans-serif; -moz-user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 1px 8px 3px 5px; direction: ltr; text-align: left; white-space: nowrap;"><span style="position: relative; line-height: 0; font-size: 0pt; margin: 0pt 5px 0pt 0pt; display: inline-block; background-color: rgb(255, 255, 255); border: 1px solid rgb(198, 198, 198); border-radius: 1px 1px 1px 1px; width: 13px; height: 13px; box-shadow: none; vertical-align: middle;" role="checkbox"><div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden; display: none;"><img src="v3tool-Dateien/imgs8.png" style="position: absolute; left: -52px; top: -44px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 68px; height: 67px;"></div></span><label style="vertical-align: middle; cursor: pointer;">Gelände</label></div><div style="margin: 1px 0pt; border-top: 1px solid rgb(235, 235, 235); display: none;"></div><div title="Zoomen Sie heran, um die 45-Grad-Ansicht anzuzeigen." style="color: rgb(184, 184, 184); font-family: Arial,sans-serif; -moz-user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 1px 8px 3px 5px; direction: ltr; text-align: left; white-space: nowrap; display: none;"><span style="position: relative; line-height: 0; font-size: 0pt; margin: 0pt 5px 0pt 0pt; display: inline-block; background-color: rgb(255, 255, 255); border: 1px solid rgb(241, 241, 241); border-radius: 1px 1px 1px 1px; width: 13px; height: 13px; box-shadow: none; vertical-align: middle;" role="checkbox"><div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden; display: none;"><img src="v3tool-Dateien/imgs8.png" style="position: absolute; left: -52px; top: -44px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 68px; height: 67px;"></div></span><label style="vertical-align: middle; cursor: pointer;">45°</label></div><div title="Satellitenbilder mit Straßennamen anzeigen" style="color: rgb(0, 0, 0); font-family: Arial,sans-serif; -moz-user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 1px 8px 3px 5px; direction: ltr; text-align: left; white-space: nowrap; display: none;"><span style="position: relative; line-height: 0; font-size: 0pt; margin: 0pt 5px 0pt 0pt; display: inline-block; background-color: rgb(255, 255, 255); border: 1px solid rgb(198, 198, 198); border-radius: 1px 1px 1px 1px; width: 13px; height: 13px; box-shadow: none; vertical-align: middle;" role="checkbox"><div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden;"><img src="v3tool-Dateien/imgs8.png" style="position: absolute; left: -52px; top: -44px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 68px; height: 67px;"></div></span><label style="vertical-align: middle; cursor: pointer;">Beschriftungen</label></div></div></div></div></div>
<div id="header">
    <div id="title">
        <h1>Google Maps API v3 Tool</h1>
    </div>
    <div class="choice">
        <form id="tools" style="float:left;text-align:right;padding:10px 0px 0px 10px;" action="./" method="post" onsubmit="return false">
        <select id="toolchoice" name="toolchoice" style="border:1px solid #000000;" onchange="toolID=parseInt(this.options[this.selectedIndex].value);setTool();">
        <option selected="selected" value="1">Polyline</option>
        <option value="2">Polygon</option>
        <option value="3">Rectangle</option>
        <option value="4">Circle</option>
        <option value="5">Marker</option>
        <option value="6">Directions</option>
        </select>
        </form>
    </div>
    <div class="choice">
        <form id="codes" style="float:left;text-align:right;padding-top:10px;" action="./" method="post" onsubmit="return false">
        <select id="codechoice" name="codechoice" style="border:1px solid #000000;" onchange="codeID=parseInt(this.options[this.selectedIndex].value);setCode();">
        <option selected="selected" value="1">KML</option>
        <option value="2">Javascript</option>
        </select>
        </form>
    </div>
    <div id="middlerow">
        <form style="float:left;text-align:right;padding-top:10px;" action="#">
        <select id="over" style="width:180px; border:1px solid #000000;">
        <option>13.452870, 60.895372</option>
        <option selected="selected">60.895372, 13.452870</option>
        </select>
        <input onclick="mapcenter();" value="Mapcenter" type="button">
        <input style="width: 140px; border: 1px solid rgb(0, 0, 0);" id="centerofmap" type="text">
        Zoom level:
        <input size="5" name="myzoom" id="myzoom" value="10" style="width: 15px; border: 1px solid rgb(0, 0, 0);" type="text">
        </form>
    </div>
</div>
<div id="buttonrow">
    <div class="topbutton">
        <input onclick="nextshape();" value="Next shape" type="button">
    </div>
    <div class="topbutton">
        <input onclick="clearMap();" value="Clear Map" type="button">
    </div>
    <div class="topbutton">
        <input onclick="deleteLastPoint();" value="Delete Last Point" type="button">
    </div>
    <div class="topbutton">
        <input onclick="styleprep();" value="Style Options" type="button">
    </div>
    <div class="topbutton">
        <input onclick="editlines();" value="Edit lines" id="EditButton" type="button">
    </div>
    <div class="topbutton">
        <input onclick='docudetails();document.getElementById("toppers").style.visibility = "visible";' value="KML input" type="button">
    </div>
    <div class="topbutton">
        <input onclick="showKML();" value="Show KML" type="button">
    </div>
    <div class="topbutton">
        <input style="width: 150px;" onclick="copyTextarea();" value="Select and copy text" type="button">
    </div>
    <div class="topbutton">
        <input onclick="regret();" value="Regret deleted point" id="RegretButton" type="button">
    </div>
    <form style="margin-right:5px" action="#" onsubmit="showAddress(this.address.value); return false">
    <input style="border: 1px solid rgb(0, 0, 0);" size="50" name="address" value="Karl Johans gate 37, 0162 Oslo, Norge" type="text">
    <input value="Search" type="submit">
    </form>
</div>
<div id="polygonstuff">
    <div>
        <a style="padding-left: 5px; color: rgb(255, 255, 255);" href="javascript:holecreator()">Hole</a>
    </div>
    <div id="stepdiv" style="padding-left:5px">
        Step 0
    </div>
    <div>
        <input id="multipleholes" onclick="nexthole();" value="Next hole" type="button">
    </div>
</div>
<div id="presenter">
    <form style="margin-bottom:5px" action="#">
    &nbsp;&nbsp;&nbsp;Live code presentation in textarea (below):
    <input name="showcodemode" id="presentcode" value="yes" onclick="showCodeintextarea();" checked="checked" type="checkbox">
<textarea id="coords1" cols="62" rows="24">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;kml xmlns="http://www.opengis.net/kml/2.2"&gt;
&lt;Document&gt;&lt;name&gt;My document&lt;/name&gt;
&lt;description&gt;Content&lt;/description&gt;
&lt;Style id="Lump"&gt;
&lt;LineStyle&gt;&lt;color&gt;CD0000FF&lt;/color&gt;&lt;width&gt;2&lt;/width&gt;&lt;/LineStyle&gt;
&lt;PolyStyle&gt;&lt;color&gt;9AFF0000&lt;/color&gt;&lt;/PolyStyle&gt;
&lt;/Style&gt;
&lt;Style id="Path"&gt;
&lt;LineStyle&gt;&lt;color&gt;FF0000FF&lt;/color&gt;&lt;width&gt;3&lt;/width&gt;&lt;/LineStyle&gt;
&lt;/Style&gt;
&lt;Style id="markerstyle"&gt;
&lt;IconStyle&gt;&lt;Icon&gt;&lt;href&gt;
http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png
&lt;/href&gt;&lt;/Icon&gt;&lt;/IconStyle&gt;
&lt;/Style&gt;
&lt;Placemark&gt;&lt;name&gt;NAME&lt;/name&gt;
&lt;description&gt;YES&lt;/description&gt;
&lt;styleUrl&gt;#Path&lt;/styleUrl&gt;
&lt;LineString&gt;
&lt;tessellate&gt;1&lt;/tessellate&gt;
&lt;altitudeMode&gt;clampToGround&lt;/altitudeMode&gt;
&lt;coordinates&gt;
11.111409,60.633122,0
11.391561,60.660049,0
11.506917,60.686954,0
11.462972,60.717866,0
11.408040,60.716523,0
11.353108,60.758142,0
11.440999,60.715179,0
11.435506,60.855937,0
11.155354,60.873321,0
11.564595,60.837205,0
11.184194,61.089826,0
11.590688,61.116371,0
12.216908,60.967432,0
13.333394,60.755459,0
13.413045,60.764180,0
13.334767,60.814444,0
&lt;/coordinates&gt;
&lt;/LineString&gt;
&lt;/Placemark&gt;
&lt;/Document&gt;
&lt;/kml&gt;</textarea>
    </form>
</div>
<div id="polylineoptions">
    <div style="padding-top:5px; margin-bottom:10px;">
        <div style="float:left;" class="styletitle">POLYLINE</div>
        <div style="float:right;"><a class="closebutton" href="javascript:closethis('polylineoptions')">X</a></div>
    </div>
    <div class="clear"></div>
    <div style="float:left; padding-left:5px; width:230px">
        <form id="style1" style="padding-bottom:1px;" action="./" method="post" onsubmit="return false">
        <div class="label">strokeColor</div>
        <input class="input" name="color" id="polylineinput1" type="text">
        <div class="clear"></div>
        <div class="label">strokeOpacity</div>
        <input class="input" name="opacity" id="polylineinput2" type="text">
        <div class="clear"></div>
        <div class="label">strokeWeight</div>
        <input class="input" name="weight" id="polylineinput3" type="text">
        <div class="clear"></div>
        <div class="label">Style id</div>
        <input class="inputlong" name="styleid" id="polylineinput4" type="text">
        </form>
    </div>
    <div class="clear"></div>
    <div>
        <a class="oklink" href="javascript:polylinestyle(0)">Click here to save style changes</a>
    </div>
    <div style="margin-top:5px">
        <a class="oklink" href="javascript:polylinestyle(1)">Click here to save as new style</a>
    </div>
    <div style="width:100%; text-align:center; margin-top:5px">
        <input class="buttons" name="backwards" id="backwards" value="Previous" onclick="stepstyles(-1);" type="button">
         Style <span id="stylenumberl">1 </span>
        <input class="buttons" name="forwards" id="forwards" value="Next" onclick="stepstyles(1);" type="button">
    </div>
</div>
<div id="polygonoptions">
    <div style="padding-top:5px; margin-bottom:10px;">
        <div style="float:left;" class="styletitle">POLYGON/RECTANGLE</div>
        <div style="float:right;"><a class="closebutton" href="javascript:closethis('polygonoptions')">X</a></div>
    </div>
    <div class="clear"></div>
    <div style="float:left; padding-left:5px; width:230px">
        <form id="style2" style="padding-bottom:1px;" action="./" method="post" onsubmit="return false">
        <div class="label">strokeColor</div>
        <input class="input" name="color" id="polygoninput1" type="text">
        <div class="clear"></div>
        <div class="label">strokeOpacity</div>
        <input class="input" name="opacity" id="polygoninput2" type="text">
        <div class="clear"></div>
        <div class="label">strokeWeight</div>
        <input class="input" name="weight" id="polygoninput3" type="text">
        <div class="clear"></div>
        <div class="label">fillColor</div>
        <input class="input" name="fillcolor" id="polygoninput4" type="text">
        <div class="clear"></div>
        <div class="label">fillOpacity</div>
        <input class="input" name="fillopacity" id="polygoninput5" type="text">
        <div class="clear"></div>
        <div class="label">Style id</div>
        <input class="inputlong" name="styleid" id="polygoninput6" type="text">
        </form>
    </div>
    <div class="clear"></div>
    <div>
        <a class="oklink" href="javascript:polygonstyle(0)">Click here to save style changes</a>
    </div>
    <div style="margin-top:5px">
        <a class="oklink" href="javascript:polygonstyle(1)">Click here to save as new style</a>
    </div>
    <div style="width:100%; text-align:center; margin-top:5px">
        <input class="buttons" name="backwards" id="backwards" value="Previous" onclick="stepstyles(-1);" type="button">
         Style <span id="stylenumberp">1 </span>
        <input class="buttons" name="forwards" id="forwards" value="Next" onclick="stepstyles(1);" type="button">
    </div>
</div>

<div id="circleoptions">
    <div style="padding-top:5px; margin-bottom:10px;">
        <div style="float:left;" class="styletitle">CIRCLE</div>
        <div style="float:right;"><a class="closebutton" href="javascript:closethis('circleoptions')">X</a></div>
    </div>
    <div class="clear"></div>
    <div style="float:left; padding-left:5px; width:250px">
        <form id="rect" style="padding-bottom:1px;" action="./" method="post" onsubmit="return false">
        <div class="label">strokeColor</div>
        <input class="input" name="color" id="circinput1" type="text">
        <div class="clear"></div>
        <div class="label">strokeOpacity</div>
        <input class="input" name="opacity" id="circinput2" type="text">
        <div class="clear"></div>
        <div class="label">strokeWeight</div>
        <input class="input" name="weight" id="circinput3" type="text">
        <div class="clear"></div>
        <div class="label">fillColor</div>
        <input class="input" name="fillcolor" id="circinput4" type="text">
        <div class="clear"></div>
        <div class="label">fillOpacity</div>
        <input class="input" name="fillopacity" id="circinput5" type="text">
        <div class="clear"></div>
        <div class="label">Style id</div>
        <input class="inputlong" name="styleid" id="circinput6" type="text">
        </form>
    </div>
    <div class="clear"></div>
    <div>
        <a class="oklink" href="javascript:circlestyle(0)">Click here to save style changes</a>
    </div>
    <div style="margin-top:5px">
        <a class="oklink" href="javascript:circlestyle(1)">Click here to save as new style</a>
    </div>
    <div style="width:100%; text-align:center; margin-top:5px">
        <input class="buttons" name="backwards" id="backwards" value="Previous" onclick="stepstyles(-1);" type="button">
         Style <span id="stylenumberc">1 </span>
        <input class="buttons" name="forwards" id="forwards" value="Next" onclick="stepstyles(1);" type="button">
    </div>
</div>
<div id="markeroptions">
    <div id="iconimages">
    <table>
        <tbody><tr>
        <td><img src="v3tool-Dateien/red-dot.png" alt=""></td>
        <td><img src="v3tool-Dateien/orange-dot.png" alt=""></td>
        <td><img src="v3tool-Dateien/yellow-dot.png" alt=""></td>
        <td><img src="v3tool-Dateien/green-dot.png" alt=""></td>
        <td><img src="v3tool-Dateien/blue-dot.png" alt=""></td>
        <td><img src="v3tool-Dateien/purple-dot.png" alt=""></td>
        <td><img src="v3tool-Dateien/red.png" alt=""></td>
        <td><img src="v3tool-Dateien/orange.png" alt=""></td>
        <td><img src="v3tool-Dateien/yellow.png" alt=""></td>
        <td><img src="v3tool-Dateien/green.png" alt=""></td>
        <td><img src="v3tool-Dateien/blue.png" alt=""></td>
        <td><img src="v3tool-Dateien/purple.png" alt=""></td>
        </tr>
        <tr>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/orange-dot.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/red.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/orange.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/yellow.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/green.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/purple.png");' type="button">
        </td>
        </tr>
        <tr>
        <td><img src="v3tool-Dateien/dd-start.png" alt=""></td>
        <td><img src="v3tool-Dateien/dd-end.png" alt=""></td>
        <td><img src="v3tool-Dateien/markerA.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_orangeA.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_yellowA.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_greenA.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_brownA.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_purpleA.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_blackA.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_greyA.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_whiteA.png" alt=""></td>
        </tr>
        <tr>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/dd-start.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/dd-end.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/markerA.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/marker_orangeA.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/marker_yellowA.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/marker_greenA.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/marker_brownA.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/marker_purpleA.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/marker_blackA.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/marker_greyA.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/marker_whiteA.png");' type="button">
        </td>
        </tr>
    </tbody></table>
    <table>
        <tbody><tr>
        <td><img src="v3tool-Dateien/marker_20_red.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_20_orange.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_20_yellow.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_20_green.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_20_brown.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_20_blue.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_20_purple.png" alt=""></td>
        <td><img src="v3tool-Dateien/marker_20_black.png" alt=""></td>
        <!--<td><img src="icons/marker_20_gray.png" alt="" /></td>-->
        <td><img src="v3tool-Dateien/marker_20_white.png" alt=""></td>
        </tr>
        <tr>
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_red.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_orange.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_yellow.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_green.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_brown.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_blue.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_purple.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_black.png");' type="button">
        </td>
        <!--<td><input type="button" name="button" value="Use" onclick='iconoptions("icons/marker_20_gray.png");' />
        </td>-->
        <td><input name="button" value="Use" onclick='iconoptions("icons/marker_20_white.png");' type="button">
        </td>
        </tr>
    </tbody></table>
    <table>
        <tbody><tr>
        <td><img src="v3tool-Dateien/bar.png" alt=""></td>
        <td><img src="v3tool-Dateien/restaurant.png" alt=""></td>
        <td><img src="v3tool-Dateien/lodging.png" alt=""></td>
        <td><img src="v3tool-Dateien/golfer.png" alt=""></td>
        <td><img src="v3tool-Dateien/sportvenue.png" alt=""></td>
        <td><img src="v3tool-Dateien/plane.png" alt=""></td>
        <td><img src="v3tool-Dateien/square.png" alt=""></td>
        </tr>
        <tr>
        <td>
        <input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/ms/micons/bar.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/ms/micons/restaurant.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/ms/micons/lodging.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/ms/micons/golfer.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/ms/micons/sportvenue.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://maps.google.com/mapfiles/ms/micons/plane.png");' type="button">
        </td>
        <td><input name="button" value="Use" onclick='iconoptions("http://www.birdtheme.org/useful/images/square.png");' type="button">
        </td>
        </tr>
    </tbody></table>
    </div>
    <div id="stylestext">
        <form action="#" style="padding-top:3px; margin-top:-5px">
            <div style="float:left;" class="styletitle">MARKER</div>
            <div style="float:right;"><a class="closebutton" href="javascript:closethis('markeroptions')">X</a></div>
            <div class="clear"></div>
            <div><br>
                &lt;Style id =<input id="st1" value="markerstyle" style="width: 100px; border: 2px solid rgb(204, 204, 204);" type="text"><br>
                &nbsp;&nbsp;&lt;Icon&gt;&lt;href&gt;
                <input id="st2" value="http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png" style="width: 380px; border: 2px solid rgb(204, 204, 204);" type="text"><br>
                <span id="currenticon" style="height: 35px"><img src="v3tool-Dateien/red-dot.png" alt=""></span>
                Use default icon, or choose icon from the chart
                <input style="width: 120px; margin-left: 8px;" name="button" value="Back to default icon" onclick='iconoptions("http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png");' type="button">
                <br><br>
            </div>
            <div style="margin-top:5px">
                <a class="oklink" href="javascript:markerstyle(0)">Click here to save style changes</a>
                <a class="oklink" href="javascript:markerstyle(1)">Click here to save as new style</a>
            </div>
            <div style="width:100%; text-align:center; margin-top:5px">
                <input class="buttons" name="backwards" value="Previous" onclick="stepstyles(-1);" type="button">
                 Style <span id="stylenumberm">1 </span>
                <input class="buttons" name="forwards" value="Next" onclick="stepstyles(1);" type="button">
            </div>
        </form>
    </div>
</div>
<div id="directionstyles">
    <div style="float:right;"><a class="closebutton" href="javascript:closethis('directionstyles')">X</a></div>
    <div class="clear"></div>
    <div style="width:100%; text-align:center; padding-top:40px">
    <input class="buttons" name="markerbutton" value="Markerstyles" onclick="toolID=5;styleoptions();" type="button">
    </div>
    <div style="width:100%; text-align:center; padding-top:15px">
    <input class="buttons" name="linebutton" value="Linestyles" onclick="toolID=1;styleoptions();" type="button">
    </div>
</div>
<div id="toppers">
    <form action="#">
    &lt;Document&gt;<br>
    &nbsp;&nbsp;&lt;name&gt;<input id="doc1" value="My document" style="width: 345px; border: 2px solid rgb(204, 204, 204);" type="text"><br>
    &nbsp;&nbsp;&lt;description&gt;<input id="doc2" value="Content" style="width: 312px; border: 2px solid rgb(204, 204, 204);" type="text"><br><br>
    &lt;Placemark&gt;<br>
    &nbsp;&nbsp;&lt;name&gt;<input id="plm1" value="NAME" style="width: 345px; border: 2px solid rgb(204, 204, 204);" type="text"><br>
    &nbsp;&nbsp;&lt;description&gt;<input id="plm2" value="YES" style="width: 312px; border: 2px solid rgb(204, 204, 204);" type="text"><br>
    &nbsp;&nbsp;&lt;styleURL&gt;<em> current style</em><br>
    &nbsp;&nbsp;&lt;tessellate&gt;<input id="plm3" value="1" style="width: 20px; border: 2px solid rgb(204, 204, 204);" type="text">&lt;/tessellate&gt;
    &lt;altitudemode&gt;<input id="plm4" value="clampToGround" style="width: 100px; border: 2px solid rgb(204, 204, 204);" type="text"><br><br>
    You may create or change styles with the "Style Options" button.<br>
    You may press it now or anytime.<br><br>
    <input name="docu" id="docu" value="Save" onclick='savedocudetails();document.getElementById("toppers").style.visibility = "hidden";' type="button">
    <input value="Close" onclick='document.getElementById("toppers").value="";document.getElementById("toppers").style.visibility = "hidden";' type="button">
    </form>
</div>
<div class="clear"></div>
<div style="height:580px"></div>

<div id="content">
<p>This application is also available with
<a href="http://www.birdtheme.org/useful/v3largemap.html">Large map.</a></p>
<p>
This is a drawing tool for polyline, polygon , polygon with holes, rectangle, circle, marker(icon), direction(route, path).
This application uses the Google Maps API Version 3 (V3). It has all the features of Google Maps MyMaps and
has direct access to the code for the shapes (overlays) you create. It should be a full-fledged alternative.
This application should now also serve as a mature alternative to my online V2 tool
<a href="http://www.birdtheme.org/useful/googletool.html">Digitizer tool</a>
</p>
<p>Code will be presented in the textarea. You may choose to see KML or Google Javascript V3.
</p>
<p>
The feature 'polygon with hole' ('donut') is built-in in V3. Choose Polygon draw mode and follow the instructions.
All overlays have style options. There are some custom markers (icons) available for Marker and Direction.
</p>
<p>
The V2 feature enableEditing now exists for V3. But it lacks 'Click to 
remove'. It is possible to build the feature for V3 with some 
javascript.<br>
I have posted an example here:
<a href="http://www.birdtheme.org/useful/editingv3.html">Enable editing in V3</a> And this method is used
here in this application to enable editing.
</p>
<p>And for editing - if you have a kml file uploaded on a server, and you want to edit its coordinates,
you may use this tool <a href="http://www.birdtheme.org/useful/editkmlfilev3.php">Edit tool for Google maps polyline and polygon</a></p>
<p>Load your kml file with the php function simplexml_load_file(kmlfile) if you want to handle
individual shapes in your kml file
<a href="http://www.birdtheme.org/useful/sub/kmlwithv3.php">Dynamic Google Maps API V3</a></p>
<p>If you are new to Google Maps, it may be useful to read the tutorial
<a href="http://code.google.com/intl/no/apis/maps/documentation/javascript/tutorial.html">Google Maps Javascript API V3 Tutorial</a>
and learn how to display the overlays you can create here on a map.
</p>
<p>If you need to learn how to use KML, this is where you start
<a href="http://code.google.com/intl/no/apis/kml/">KML</a></p>
Other useful links:<br>
<table id="morelinks">
<tbody><tr>
<td><a href="http://code.google.com/intl/no/apis/maps/documentation/v3/">Google Maps V3 Documentation</a></td>
<td rowspan="2">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="DHMCKU8XE4HZE" type="hidden">
<input src="v3tool-Dateien/btn_donateCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" border="0" type="image">
<img alt="" src="v3tool-Dateien/pixel.gif" border="0" width="1" height="1">
</form>
</td>
</tr>
<tr>
<td><a href="http://groups.google.com/group/google-maps-js-api-v3">Google Maps API V3 discussion group</a></td>
<td></td>
</tr>
</tbody></table>
</div>
<div>
<table>
<tbody><tr>
<td align="left"><a href="http://www.birdtheme.org/index.html"><script type="text/javascript">
document.write ('<img src="../statistics/sitestatistics/collect.php?name=face.jpg&refer=' + document.referrer + '"');
</script><img src="v3tool-Dateien/collect.jpeg" alt="Home" border="0" width="31" height="31"></a>
</td>
<td>
<a href="http://www.supertop100.com/aff.prg?stamp,446"><img src="v3tool-Dateien/446.gif" alt="Click Here to Visit!" border="0" width="88" height="31"></a>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: googlemapstool@birdtheme.org
</td>
</tr>
</tbody></table>
</div>
<div id="directionsPanel" style="margin:20px;background-color:#FFEE77;"></div>
<p></p>

If you copy this page, please delete the Google Analytics page tracker
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
</script><script src="v3tool-Dateien/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3220503-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>




</body></html>